/* ─── Consultations — unlisted page ──────────────────────────────────
   Shared by direct link only: noindex, absent from sitemap.xml, and not
   linked from any other page.

   Deliberately quieter than the rest of the site, and deliberately
   separated from it: the header carries the mark but no navigation, so
   someone arriving here for clinical support is not immediately shown
   the matchmaking and corporate arms. Tokens come from styles.css so it
   is recognisably the same practice. */

.page-cons { --cons-max: 780px; background: var(--paper); color: var(--ink); }

.cons-head { padding: 26px 0; border-bottom: 1px solid var(--rule-soft); }
.cons-head .brand-logo { height: 24px; width: auto; display: block; }

.cons-eyebrow {
  display: block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.cons-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--ink-deep);
  margin: 16px 0 0; text-wrap: balance;
}
.cons-h1 .ital { font-style: italic; color: var(--green-deep); }
.cons-h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink-deep);
  margin: 14px 0 0;
}
.cons-lead {
  margin: 22px 0 0; max-width: 46ch;
  font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; color: var(--ink-2);
}
.cons-by {
  margin: 26px 0 0;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}

/* Hero */
.cons-hero { padding-block: clamp(44px, 5vw, 72px); }
.cons-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .cons-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.cons-photo {
  border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  max-width: 380px; margin-left: auto;
}
.cons-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
@media (max-width: 860px) { .cons-photo { max-width: 300px; margin-left: 0; } }

/* Quote */
.cons-quote {
  padding-block: clamp(36px, 4vw, 52px);
  border-block: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.cons-quote p {
  margin: 0; max-width: 40ch;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.6vw, 32px); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink-deep);
}

/* Areas */
.cons-areas { padding-block: clamp(48px, 5vw, 72px); }
.cons-area-list {
  margin-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--rule);
}
.cons-area {
  padding: 20px 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
}
@media (max-width: 720px) { .cons-area { grid-template-columns: 1fr; gap: 6px; } }
.cons-area h3 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em; color: var(--ink-deep);
}
.cons-area p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* The referral note is the responsible part of this page, so it is set
   as a statement rather than as small print. */
.cons-referral {
  margin: clamp(30px, 3.5vw, 44px) 0 0; max-width: 62ch;
  padding: 22px 24px;
  border-left: 2px solid var(--green);
  background: oklch(0.55 0.11 140 / 0.05);
  font-size: 15.5px; line-height: 1.6; color: var(--ink-deep);
}

/* Padding is scaled to how much a section actually carries. A flat
   84px block left the short sections (steps, voices, about, contact)
   running about half empty next to the ruled areas list, which is the
   only long section on the page. */

/* Steps */
.cons-steps { padding-block: clamp(40px, 4vw, 56px); border-top: 1px solid var(--rule-soft); }
.cons-step-list {
  list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
/* A rule over each step. Three short columns in a 1,200px field read as
   stranded without one; it also echoes the ruled areas list above. */
.cons-step { border-top: 1px solid var(--rule); padding-top: 18px; }
@media (max-width: 720px) {
  .cons-step-list { grid-template-columns: 1fr; gap: 22px; }
}
.cons-step-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--green-deep);
}
.cons-step-list h3 {
  margin: 10px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; color: var(--ink-deep);
}
.cons-step-list p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* Voices */
.cons-voices { padding-block: clamp(40px, 4vw, 56px); background: var(--paper-2); border-block: 1px solid var(--rule-soft); }
.cons-voice-list {
  margin-top: clamp(26px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 860px) { .cons-voice-list { grid-template-columns: 1fr; gap: 22px; } }
.cons-voice-list blockquote {
  margin: 0; padding: 24px 26px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  font-family: var(--serif); font-size: 19px; line-height: 1.4;
  letter-spacing: -0.005em; color: var(--ink-deep);
}

/* About */
.cons-about { padding-block: clamp(40px, 4vw, 56px); }
.cons-about-grid {
  display: grid; grid-template-columns: 0.4fr 1.6fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
@media (max-width: 780px) { .cons-about-grid { grid-template-columns: 1fr; gap: 26px; } }
.cons-about-photo {
  border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5;
  border: 1px solid var(--rule); max-width: 220px;
}
.cons-about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
/* Stacked, the 220px cap that keeps the photo modest beside the copy
   leaves it inset in a full-width column with dead space to its right.
   Must follow the base rule to win on source order. */
@media (max-width: 780px) { .cons-about-photo { max-width: none; } }
.cons-about-inner > * { max-width: 62ch; }
.cons-about-inner p {
  margin: 18px 0 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.62; color: var(--ink-2);
}
/* The 62ch measure that keeps the prose readable is narrower than this
   single line of mono, which broke it after a separator. It sets its own
   width. */
.cons-about-inner .cons-creds { max-width: none; }
.cons-creds {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.cons-creds .sep { color: var(--ink-4); }

/* Contact */
.cons-contact {
  padding-block: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--rule-soft); background: var(--paper-2);
}
.cons-contact-inner > * { max-width: var(--cons-max); }
.cons-contact-inner p {
  margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 48ch;
}
.cons-mail {
  /* The page's only call to action, so it is padded to a comfortable
     touch target rather than left at the height of its own text. */
  display: inline-block; margin-top: 20px; padding: 8px 0 10px;
  font-family: var(--serif); font-size: clamp(21px, 2.4vw, 28px);
  color: var(--green-deep); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--green) 45%, transparent);
}
.cons-mail:hover { border-bottom-color: var(--green); }

/* Footer */
.cons-foot { padding: 28px 0 40px; }
.cons-foot .container {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.cons-foot a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  display: inline-block; padding: 12px 0; margin: -12px 0;
}

/* Full-bleed band. Sits deep in the page, past the areas list, so it breaks
   the column without crowding the hero photo. Decorative, so alt="" and
   aria-hidden — it is atmosphere, not a record of a real session. */
.cons-band { display: block; overflow: hidden; }
.cons-band img {
  width: 100%; height: clamp(240px, 34vw, 420px);
  object-fit: cover; object-position: 50% 30%; display: block;
  /* Softened on purpose. Sharp, it reads as documentation of a real
     session; out of focus it reads as atmosphere, which is the only
     honest thing a stock-lit frame can claim on a page about clinical
     work. The scale hides the transparent fringe blur() leaves at the
     edges of the box. */
  /* Blur scales with the viewport: a fixed 5px radius that reads as soft
     focus at 1280 reads as a redaction at 390. */
  filter: blur(clamp(2.5px, 0.4vw, 5px)) saturate(0.96);
  transform: scale(1.08);
}