/* ==========================================================================
   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 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 {
  display: grid;
  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; }
}