/* ==========================================================================
   chp-layout.css — LAYOUT RESTRUCTURE for the four exported routes
   --------------------------------------------------------------------------
   The animations, timings and DOM of the export are untouched. What changes
   here is composition: grid, rhythm, alignment, framing and type scale, so
   the pages stop reading as the reference template and start reading as an
   editorial portfolio.

   Organised section by section, in page order, so any block can be reverted
   on its own:
     01  home / statement       (.home-about)
     02  home / vision cards    (#vision-section)
     03  home / key facts       (#keyfacts-section)
     04  home / work            (#work-section)
     05  home / testimonials    (#testimonials)
     06  home / enquiry         (form block)
     07  services / about / contact
     08  shared editorial system (section numerals, rules, labels)
   ========================================================================== */

/* ==========================================================================
   08 · SHARED EDITORIAL SYSTEM (applied to all four routes)
   ========================================================================== */
.chp-secnum {
  position: absolute;
  top: clamp(18px, 2.4vw, 40px);
  left: var(--chp-pad, 32px);
  z-index: 40;
  font-family: "martianMono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: currentColor;
  opacity: 0.45;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chp-secnum::after {
  content: "";
  width: clamp(30px, 5vw, 90px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
/* a section flush against the top of the page sits behind the fixed
   logo/menu button — clear it instead of overlapping */
.chp-secnum--below-nav {
  top: clamp(70px, 8vw, 110px);
}

/* a hairline that runs between restructured sections */
.chp-hairline {
  position: absolute;
  left: var(--chp-pad, 32px);
  right: var(--chp-pad, 32px);
  top: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.14;
  pointer-events: none;
  z-index: 30;
}

/* ==========================================================================
   01 · HOME — statement block: centred stack → editorial two-column
   ========================================================================== */
body[data-chp-page="home"] .home-about .about-top-block {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
  padding-inline: var(--chp-pad, 32px);
  max-width: 1560px;
  margin-inline: auto;
}
body[data-chp-page="home"] .home-about .about-top-block > *:first-child { text-align: left; }
body[data-chp-page="home"] .home-about h2 {
  text-align: left !important;
  max-width: 20ch;
  letter-spacing: -0.045em !important;
}
/* the trailing paragraph pair becomes a right-hand meta column with a rule */
body[data-chp-page="home"] .home-about .about-top-block > *:last-child {
  position: relative;
  padding-left: clamp(18px, 2vw, 34px);
  border-left: 1px solid currentColor;
  border-image: linear-gradient(180deg, currentColor, transparent) 1;
  opacity: 0.92;
}
@media (max-width: 900px) {
  body[data-chp-page="home"] .home-about .about-top-block { grid-template-columns: 1fr; }
  body[data-chp-page="home"] .home-about .about-top-block > *:last-child { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   02 · HOME — vision: symmetric float → asymmetric editorial stagger
   ========================================================================== */
body[data-chp-page="home"] #vision-section .chp-card-a { transform: translateY(-4vh); }
body[data-chp-page="home"] #vision-section .chp-card-b { transform: translateY(6vh); }
body[data-chp-page="home"] #vision-section .chp-card-c { transform: translateY(-2vh); }

/* ==========================================================================
   03 · HOME — key facts: card carousel → data sheet
   ========================================================================== */
body[data-chp-page="home"] #keyfacts-section .tr__container > .grid,
body[data-chp-page="home"] #keyfacts-section .line-plus-block {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  padding-top: clamp(18px, 2vw, 34px);
}
body[data-chp-page="home"] #keyfacts-section .marquee-wrapper {
  border-block: 1px solid rgba(0, 0, 0, 0.12);
  padding-block: clamp(8px, 1vw, 16px);
  margin-block: clamp(18px, 2.4vw, 40px);
  opacity: 0.75;
}

/* ==========================================================================
   05 · HOME — testimonials: centred block → pull-quote spread
   ========================================================================== */
body[data-chp-page="home"] #testimonials .tr__container { position: relative; }
body[data-chp-page="home"] #testimonials .tr__container::before {
  content: "“";
  position: absolute;
  top: clamp(-30px, -2vw, 0px);
  left: -0.06em;
  font-family: "ppEditorial", Georgia, serif;
  font-size: clamp(120px, 18vw, 300px);
  line-height: 0.7;
  opacity: 0.07;
  pointer-events: none;
}

/* ==========================================================================
   06 · HOME + CONTACT — enquiry block: single column → brief + form spread
   ========================================================================== */
.chp-formwrap {
  /* briefColumn() (chp-layout.js) inserts this as a new sibling next to
     the form's original holder inside whatever grid the exported page
     already has (grid-cols-12, on both /contact and /home) — with no
     span rule of its own it fell into a single implicit 1-of-12 column
     track (~114px), the .chp-brief sidebar text wrapped to one word per
     line inside that sliver, and the form holder (which still carries
     its own explicit w-full/max-w-* utility classes) rendered at its
     real width regardless, landing right on top of it. grid-column:1/-1
     spans the full row no matter how many columns the parent actually
     has, so this always gets real width to lay its own two columns out
     in, whatever page it's used on. */
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: start;
}
@media (max-width: 980px) { .chp-formwrap { grid-template-columns: 1fr; } }
.chp-brief {
  border-left: 1px solid currentColor;
  padding-left: clamp(18px, 2vw, 30px);
  opacity: 0.9;
}
.chp-brief h3 {
  font-family: "familjen", sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  font-weight: 400;
}
.chp-brief ul { margin: 0; padding-left: 18px; }
.chp-brief li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.6; opacity: 0.75; }
.chp-brief .chp-mono { display: block; margin-bottom: 12px; opacity: 0.6; }

/* ==========================================================================
   ORBIT — the wrap-around image ring (home, second-last section)
   ========================================================================== */
.chp-orbit {
  position: relative;
  padding-block: clamp(48px, 5.5vw, 96px) clamp(30px, 4vw, 70px);
  background: var(--chp-bg);
  overflow: clip;
  border-top: 1px solid var(--chp-line);
}
.chp-orbit__stage {
  position: relative;
  width: min(86vw, 900px);
  aspect-ratio: 1 / 1;
  margin: clamp(6px, 1vw, 18px) auto 0;
  will-change: transform;
}
.chp-orbit__ring { position: absolute; inset: 0; will-change: transform; }
.chp-orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(126px, 17vw, 232px);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--chp-line);
  background: #0b0c11;
  transform-origin: 50% 50%;
  transition: border-color 0.5s var(--chp-ease);
}
.chp-orbit__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: grayscale(1) contrast(1.05) brightness(0.85);
  transition: filter 0.7s var(--chp-ease), transform 1s var(--chp-ease);
  will-change: transform;
}
.chp-orbit__item:hover { border-color: var(--chp-line-strong); }
.chp-orbit__item:hover img { filter: grayscale(0) brightness(1); transform: scale(1.06); }
.chp-orbit__core {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  padding-inline: 10%;
}
.chp-orbit__core::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: radial-gradient(60% 55% at 50% 50%, rgba(4, 5, 8, 0.94) 45%, rgba(4, 5, 8, 0) 78%);
  pointer-events: none;
}
.chp-orbit__core > * { position: relative; }
.chp-orbit__core h2 {
  font-family: "familjen", sans-serif;
  font-size: clamp(24px, 3.6vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin: 0 0 16px;
  color: var(--chp-fg-strong);
  font-weight: 400;
}
.chp-orbit__core p { max-width: 40ch; margin: 0 auto; color: var(--chp-dim); font-size: 15px; }
.chp-orbit__core .chp-btn { pointer-events: auto; margin-top: 26px; }
@media (max-width: 700px) {
  .chp-orbit__stage { width: 132vw; margin-inline: -16vw; }
  .chp-orbit__item { width: 108px; }
}

/* ==========================================================================
   07 · SERVICES / ABOUT / CONTACT — shared re-composition
   ========================================================================== */
body[data-chp-page="services-index"] .sec-expertise .tr__container,
body[data-chp-page="about"] section .tr__container,
body[data-chp-page="contact"] section .tr__container { position: relative; }

/* left-hand sticky section label rail on desktop */
@media (min-width: 1100px) {
  .chp-rail-label {
    position: absolute;
    left: calc(var(--chp-pad, 32px) * -1 + 8px);
    top: 0;
    writing-mode: vertical-rl;
    font-family: "martianMono", monospace;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.4;
    pointer-events: none;
  }
}

/* injected sections: alternate alignment so the page has a rhythm */
#chp-home-sections .chp-sec:nth-of-type(even) .chp-head { justify-content: flex-end; text-align: right; }
#chp-home-sections .chp-sec:nth-of-type(even) .chp-head .chp-h2 { margin-left: auto; }
#chp-home-sections .chp-sec:nth-of-type(even) .chp-label { flex-direction: row-reverse; }
#chp-home-sections .chp-sec:nth-of-type(even) .chp-lede { margin-left: auto; }
@media (max-width: 760px) {
  #chp-home-sections .chp-sec:nth-of-type(even) .chp-head,
  #chp-home-sections .chp-sec:nth-of-type(even) .chp-lede { text-align: left; }
}

/* site footer: drop the giant hairline wordmark and its hover/sound canvas
   overlay so the footer ends at the CTA + copyright/contact block. The
   "sound on, hover the lines" label pointed at that canvas, so it goes too. */
#site-footer > .overflow-x-clip.pb-4,
#site-footer > .pointer-events-none.absolute.inset-0,
#site-footer .footer-sound-icon {
  display: none !important;
}

/* revamped page heroes (chp.js: aboutHeroRevamp() and siblings): React's
   live scroll-position indicator (.chp-secnum--below-nav) reparents itself
   into whichever section is currently active, including these — hide it
   wherever it lands here instead of fighting the reparenting. */
.chp-hero--revamped .chp-secnum {
  display: none !important;
}

/* revamped heroes sit on React routes with their own nav bar, not the
   standalone chp-nav .chp-hero's default top padding was tuned for — that
   generic clamp(120px, 15vw, 220px) left a big empty gap above the
   breadcrumb here. Scoped to --revamped so blog/industries/etc. (which
   already look right) are untouched. */
.chp-hero--revamped {
  padding-top: clamp(64px, 8vw, 130px);
}

/* crash hero fallback, home only: mirrors the real hero's stat badge and
   bottom tagline so the crash state reads closer to the real page
   instead of a visibly plainer stand-in. */
.chp-crash-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(28px, 3vw, 44px);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--chp-fg-strong);
  opacity: 0.85;
}
.chp-crash-hero__tagline {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chp-fg-strong);
  opacity: 0.6;
}

/* the pre-revamp About hero (chp.js: aboutHeroRevamp()) — kept in the DOM,
   never removed, so the React-owned GSAP hook on its drag-strip gallery
   is never orphaned. See the comment on aboutHeroRevamp() for the crash
   this replaces. */
.chp-about-hero-superseded {
  display: none !important;
}

/* crash hero fallback (chp.js: crashHeroFallback()): React's hydration
   recovery resets body's own class list, losing whatever class carried
   the page's dark background — body falls back to opaque white,
   covering html's (untouched) dark background. Forced back here. */
html.chp-crash-recovered body {
  background: #040508 !important;
}

/* crash footer fallback (chp.js: crashFooterFallback()) — same idea as
   the crash hero: fills the gap left when the real #site-footer is
   unmounted along with the rest of the React tree, using the same
   simple CTA/copyright shape the real footer already has post-cleanup. */
.chp-crash-footer {
  padding: clamp(48px, 6vw, 96px) 0 clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--chp-line);
}
.chp-crash-footer h2 {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  color: var(--chp-fg-strong);
  font-weight: 400;
}
.chp-crash-footer__bot {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.55;
}

/* Work hero: drop the large faded three-blade "C" mark behind the
   headline, keep everything else (label, title, lede, key-facts strip)
   exactly as built. Scoped to the work-index page so nothing elsewhere
   sharing similar utility classes is affected. */
body[data-chp-page="work-index"] .w-80.h-80.flex.items-center.justify-center.pointer-events-none.z-20 {
  display: none !important;
}

/* Contact hero revamp (chp.js: contactHeroRevamp()). The pinned original
   is hidden, never removed — same reasoning as #work-section above: a
   live GSAP ScrollTrigger owns it, and display:none is the only safe
   way to retire it without racing React's render. */
.chp-contact-hero-superseded {
  display: none !important;
}

/* Light variant: white background, dark text, overriding chp-hero's
   default dark-on-dark palette for this one hero only. */
.chp-hero--light {
  background: #fff;
  color: #0c0c0e;
}
.chp-hero--light .chp-hero__glow {
  background:
    radial-gradient(40% 50% at 30% 30%, rgba(226, 69, 58, 0.08), transparent 70%),
    radial-gradient(45% 50% at 80% 60%, rgba(20, 20, 24, 0.05), transparent 72%);
  filter: blur(30px);
}
.chp-hero--light .chp-crumb a,
.chp-hero--light .chp-crumb span,
.chp-hero--light .chp-label {
  color: rgba(12, 12, 14, 0.5);
}
.chp-hero--light .chp-crumb a:hover { color: #0c0c0e; }
.chp-hero--light h1 { color: #0c0c0e; }
.chp-hero--light .chp-lede { color: rgba(12, 12, 14, 0.62); }
.chp-hero--light .chp-hero__rule { background: rgba(12, 12, 14, 0.12); }
.chp-hero__accent { color: #e2453a; }

/* the "search bar" — a styled link, not a real input, that jumps to the
   actual form (#chp-contact-form, tagged by chp.js: contactFormId()). */
.chp-hero__searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 420px;
  padding: 16px 12px 16px 22px;
  border-radius: 999px;
  border: 1px solid rgba(12, 12, 14, 0.14);
  background: #fff;
  box-shadow: 0 12px 32px -18px rgba(12, 12, 14, 0.25);
  font-size: 14px;
  color: rgba(12, 12, 14, 0.55);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.chp-hero__searchbar:hover {
  border-color: rgba(12, 12, 14, 0.28);
  box-shadow: 0 16px 36px -16px rgba(12, 12, 14, 0.3);
}
.chp-hero__searchbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #0c0c0e;
  color: #fff;
  font-size: 15px;
}

/* floating content-type tags, decorative — positioned loosely around the
   hero, hidden below the lg breakpoint so they never crowd mobile. */
.chp-hero__tag {
  display: none;
  position: absolute;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(12, 12, 14, 0.1);
  background: #fff;
  box-shadow: 0 10px 26px -16px rgba(12, 12, 14, 0.25);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(12, 12, 14, 0.55);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .chp-hero__tag { display: block; }
}
.chp-hero__tag--a { top: 14%; right: 8%; }
.chp-hero__tag--b { top: 30%; right: 16%; transform: rotate(-3deg); }
.chp-hero__tag--c { bottom: 22%; right: 10%; transform: rotate(2deg); }
.chp-hero__tag--d { bottom: 12%; right: 22%; }