/* ============================================================
   Arche Advisory — Section layouts
   v1.1 — dark ground
   Ground order: 1 → 2 → 1 → ANCHOR → 1 → 2 → 1 → ANCHOR
   ============================================================ */

/* ------------------------------------------------------------
   1. Hero  (#top, ground-1)
   Padding is tuned so the next section is visibly cut by the
   fold — no visitor should mistake the hero for the whole page.
------------------------------------------------------------ */

.hero { padding-top: 72px; padding-bottom: 96px; }

.hero .lockup-full { margin-bottom: 52px; }

.hero h1 { margin-bottom: 32px; }
.hero .lead { max-width: var(--maxw-prose); }
.hero h1 { max-width: 22ch; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.hero-meta .tick-rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

@media (min-width: 810px) {
  .hero { min-height: calc(100vh - 84px); display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
}

/* ------------------------------------------------------------
   2. What has happened  (ground-2)
------------------------------------------------------------ */

/* v9.2 — the film band breaks out to 100vw here, same as .stages.
   See the note under .method for why this is `clip` and not `hidden`. */
.happened { overflow-x: clip; }

.happened .rule { margin-bottom: 28px; }
.happened .section-title { margin-bottom: 44px; }
.happened .prose p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); }
.happened .byproduct { margin-top: 28px; }
.happened .quote {
  max-width: 780px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: var(--bw) solid var(--line);
}

/* ------------------------------------------------------------
   3. Show up as you are  (ground-1)
------------------------------------------------------------ */

.safe { overflow-x: clip; }

.safe .rule { margin-bottom: 28px; }
.safe .section-title { margin-bottom: 40px; }

/* ------------------------------------------------------------
   4. How I work  (#method, ANCHOR ground-3)
------------------------------------------------------------ */

/* v9.2 — .stages breaks out to 100vw. On Windows 100vw counts the
   scrollbar, so without this the page gains about seventeen pixels of
   horizontal scroll. `clip` rather than `hidden`: `hidden` would make
   this section a scroll container. */
.method { overflow-x: clip; }

.method .rule { margin-bottom: 28px; }
.method .section-title { margin-bottom: 44px; }

.method-intro { max-width: 760px; }
.method-intro p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--fg-2); }
.method-intro .secondary {
  margin-top: 24px;
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--fg-3);
  max-width: 700px;
}

/* The two principles */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  margin-top: 76px;
  padding-top: 64px;
  border-top: var(--bw) solid var(--line);
}

/* v9.2 — the two principle headings move off Playfair Display italic
   and onto Nevera, and the body under them takes the six stages'
   reading size instead of --fs-small.

   These two sit immediately below stage six, and they were the last
   thing on the page still setting a heading in the old serif. Against
   a 104px Nevera stage name eighty pixels above them, a 27px Playfair
   italic read as a different website. They are sub-headings inside the
   method section rather than section headers, so they take a curve
   between the two: bigger than body, well short of .section-title.

   The body went from --fs-small at --fg-3 to the stage-body treatment
   — clamp(16px, 1.15vw, 20px) at --fg-1 / 0.94. It was the smallest,
   faintest text in the section and it is carrying the two ideas the
   engagement is actually sold on. */
.principle .rule { margin-bottom: 24px; }
.principle h3 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--fg-1);
  margin-bottom: 20px;
  overflow-wrap: normal;
  hyphens: none;
}
.principle p {
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.62;
  color: var(--fg-1);
  opacity: 0.94;
}

/* Same treatment as .principle p — this closing paragraph sits in the
   same block and should not be set differently from the two above it. */
.method-close {
  margin-top: 64px;
  padding-top: 40px;
  border-top: var(--bw) solid var(--line);
  max-width: 820px;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.62;
  color: var(--fg-1);
  opacity: 0.94;
}

/* ------------------------------------------------------------
   5. Evidence  (#proof, ground-1)
------------------------------------------------------------ */

.evidence .rule { margin-bottom: 20px; }
.evidence .section-title { margin-bottom: 36px; }
.evidence .prose p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); }
.evidence .quote { max-width: 780px; margin-top: 48px; }

.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 72px;
  border-top: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line);
}

.fig { padding: 44px 36px 44px 0; }
.fig + .fig { padding-left: 36px; border-left: var(--bw) solid var(--line); }
.fig .figure { margin-bottom: 18px; }
.fig .cap {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 30ch;
}

.provenance {
  padding-top: 30px;
  font-size: var(--fs-body);
  border-top: var(--rule-w) solid var(--sage-bright);
  max-width: 760px;
  font-size: var(--fs-small);
  line-height: 1.66;
  color: var(--fg-3);
  display: inline-block;
}

/* ------------------------------------------------------------
   6. About  (ground-2)
------------------------------------------------------------ */

.about-grid {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 72px;
  align-items: start;
}

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--ground-3);
  border: var(--bw) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
}
.portrait .placeholder {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.9;
  padding: 20px;
}

.about-copy .rule { margin-bottom: 32px; }
.about-copy .section-title { margin-bottom: 32px; }
.about-copy p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); }

.draft-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-bright);
  background: var(--sage-tint);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  margin-bottom: 22px;
}

/* ------------------------------------------------------------
   7. Perspective  (#perspective, ground-1)
------------------------------------------------------------ */

.perspective .rule { margin-bottom: 20px; }
.perspective .eyebrow { margin-bottom: 36px; }
.perspective .intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  max-width: var(--maxw-prose);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--ground-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 28px 28px;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}

.card .eyebrow { margin-bottom: 20px; }
.card h3 {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: var(--ls-heading);
  margin-bottom: 14px;
}
.card .desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-3);
  margin-bottom: 28px;
}
.card .read {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--sage-bright);
}
.card .read .arrow { transition: transform var(--dur-base) var(--ease-out); }
.card:hover .read .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   8. Book a session  (#book, ANCHOR ground-3)
------------------------------------------------------------ */

.book .rule { margin-bottom: 20px; }
.book .eyebrow { margin-bottom: 30px; }
.book .section-title { margin-bottom: 32px; }
.book .prose {
  max-width: 46em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}
.book .prose p {
  font-size: clamp(18px, 1.25vw, 23px);
  line-height: 1.62;
  margin-top: 0;
}

/* ------------------------------------------------------------
   .scheduler and .scheduler-fallback are INERT as of v9.1.

   They styled the Calendly inline embed, which was removed because
   its colours cannot be changed on a free Calendly plan and because
   it loaded a third-party script onto every visit to the home page.

   Kept, not deleted: if a paid Calendly plan is ever taken out, the
   embed can go back and this is what it needs. The white --paper
   background below is not a mistake — it existed to accommodate a
   widget that renders white whatever the page around it looks like.
------------------------------------------------------------ */

/* v9.2 — the scheduler panel, rebuilt for a DARK embed.

   Until v9.1 this had a white --paper background, because the free
   Calendly plan renders white and the panel existed to stop that
   fighting the page. On the paid plan the widget takes
   background_color=0E0F0D, so the panel is now ink and the seam
   between site and embed disappears.

   The hairline border stays. Without it a dark embed on a dark
   section has no edge at all, and the reader cannot tell where the
   page stops and the booking tool starts — which matters, because
   one of them is a third party. */
.scheduler {
  position: relative;
  margin-top: 56px;
  background: var(--ink);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  min-height: 420px;
}

/* Sits UNDER the widget and is covered by it once Calendly paints.
   Shown while loading, and left showing if the script never arrives —
   blocked, offline, or an ad blocker that catches calendly.com. */
.scheduler-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: clamp(28px, 4vw, 56px);
  text-align: left;
}
.scheduler-fallback p { color: var(--fg-2); max-width: 42ch; }
.scheduler-fallback .mono {
  color: var(--sage-bright);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The widget paints into here; give it the stacking context so it
   covers the fallback rather than sitting behind it. */
.calendly-inline-widget {
  position: relative;
  z-index: 1;
}

/* v9.1 — the booking action, in the design system rather than in
   Calendly's. Button plus a plain line saying what happens next, so a
   new tab is never a surprise. */
.book-actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.email-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.email-line .label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sage-bright);
}
.email-line a {
  font-size: var(--fs-body);
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1.5px solid var(--sage-bright);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.email-line a:hover { color: var(--sage-bright); }

.book-close {
  margin-top: 48px;
  padding-top: 30px;
  border-top: var(--rule-w) solid var(--sage-bright);
  max-width: 720px;
  font-size: var(--fs-small);
  line-height: 1.66;
  color: var(--fg-3);
  display: inline-block;
}

/* ------------------------------------------------------------
   Responsive — single breakpoint at 900px
------------------------------------------------------------ */

@media (max-width: 809.98px) {
  .nav-links a.plain { display: none; }
  .lockup-nav { font-size: 17px; }
  .lockup-mini { font-size: 18px; }

  /* the stage rows carry their own rules in stages.css */

  .principles {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 56px;
    padding-top: 48px;
  }

  .figures { grid-template-columns: 1fr; }
  .fig { padding: 34px 0; }
  .fig + .fig { padding-left: 0; border-left: 0; border-top: var(--bw) solid var(--line); }

  .cards { grid-template-columns: 1fr; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .portrait { max-width: 300px; }

  .hero { padding-top: 48px; padding-bottom: 72px; }
  .hero .lockup-full { margin-bottom: 40px; }
  .hero-actions { gap: 20px; }
}


/* ------------------------------------------------------------
   Band copy — v1.8

   Inside a band the copy owns half the screen rather than a
   680px column, so the lead paragraphs step up to match. The
   prose cap still applies; it is the type that grows, not the
   measure.
------------------------------------------------------------ */

.band-copy .prose p,
.band-copy > .prose > p {
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.66;
}
.band-copy .section-title { max-width: 16ch; }
.band-copy .quote { max-width: none; }
.band-copy .prose { max-width: none; }