/**
 * /book-consultation/
 *
 * Two columns at the top: what she has done on the left, what to do about it
 * on the right. On a phone they stack, and the card goes FIRST — somebody who
 * arrived from a reel already knows who she is and wants the button, not four
 * paragraphs of biography before it.
 */

.dwe-book__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 48px;
	align-items: start;
}

.dwe-book__say .dwe-hero__p {
	max-width: 56ch;
}

.dwe-book__say .dwe-hero__p + .dwe-hero__p {
	margin-top: 14px;
}

/* The card. Sticky on a tall screen, so the button stays within reach while
   the eye travels down the biography beside it. */
.dwe-book__card {
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	background: rgba(255, 255, 255, .04);
}

/* On a wide screen the card matches the biography beside it, edge for edge:
   same top, same bottom, its contents centred between them. It used to be
   sticky and self-sized, which left a short box floating against a tall
   column — two different shapes sharing a row. Now the row reads as two
   halves of one block. (Sticky is no longer needed: a card this tall stays
   in view for the whole of the section anyway.) */
@media (min-width: 1024px) {
	.dwe-book__grid {
		align-items: stretch;
	}

	.dwe-book__act {
		display: flex;
	}

	.dwe-book__card {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.dwe-book__ch {
	margin: 12px 0 10px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: clamp(22px, 2.1vw, 28px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.01em;
}

.dwe-book__cp {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	opacity: .85;
}

.dwe-book__btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dwe-book__btns .dwe-btn {
	justify-content: center;
	text-align: center;
}

.dwe-book__note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: .62;
}

/* The anchor the Book buttons jump to. It sits just above the form and is
   offset so the sticky site header does not land on top of the heading. */
.dwe-book__anchor {
	display: block;
	height: 0;
	scroll-margin-top: 96px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@media (max-width: 1023px) {
	.dwe-book__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	/* the ask before the biography, for anyone who already knows her */
	.dwe-book__act  { order: 1; }
	.dwe-book__say  { order: 2; }
}

@media (max-width: 720px) {
	.dwe-book__card { padding: 22px 18px; }
	.dwe-book__say .dwe-hero__p { max-width: none; }
}

/* Her photo, deliberately small: enough to put a face to "I take the session
   myself", not so much that the page becomes a portrait. */
.dwe-book__who {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 22px;
}

.dwe-book__face {
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 18%;      /* her face, not her shoulders */
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
}

.dwe-book__whoname {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.dwe-book__whoname em {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	font-style: normal;
	opacity: .6;
}

@media (max-width: 720px) {
	.dwe-book__face { width: 60px; height: 60px; flex-basis: 60px; }
	.dwe-book__who  { margin-bottom: 18px; }
}

/* ------------------------------------------------------------------
   Room to breathe.

   The first version set the type at the homepage's rhythm, which is
   built for short hero lines. Here the left column is four paragraphs
   of biography, and at that length the same leading reads as a wall:
   the eye loses its place between lines and the whole column looks
   like something to skip rather than something to read.

   Everything below is spacing. Not one size got smaller — the text is
   the same, it simply has somewhere to sit.
   ------------------------------------------------------------------ */

.dwe-book__grid {
	gap: 64px;
}

.dwe-book__top .dwe-key__k {
	display: block;
	margin-bottom: 18px;
	letter-spacing: .14em;
}

.dwe-book__say .dwe-hero__h {
	margin: 0 0 26px;
	line-height: 1.08;
}

.dwe-book__say .dwe-hero__p {
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.8;          /* the single biggest change */
	opacity: .88;
}

.dwe-book__say .dwe-hero__p + .dwe-hero__p {
	margin-top: 22px;
}

.dwe-book__say .dwe-hero__facts {
	margin-top: 42px;
	gap: 28px 44px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.dwe-book__say .dwe-hero__facts span {
	line-height: 1.55;
}

/* The card, on the same principle. */
.dwe-book__card {
	padding: 32px;
}

.dwe-book__card .dwe-key__k {
	margin-bottom: 14px;
}

.dwe-book__ch {
	margin: 0 0 14px;
	line-height: 1.22;
}

.dwe-book__cp {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.72;
}

.dwe-book__btns {
	gap: 12px;
}

.dwe-book__note {
	margin-top: 18px;
	line-height: 1.6;
}

/* The name beside the photo wants the same treatment. */
.dwe-book__who {
	margin-bottom: 30px;
	gap: 15px;
}

.dwe-book__whoname {
	gap: 4px;
}

@media (max-width: 1023px) {
	.dwe-book__grid { gap: 38px; }
}

@media (max-width: 720px) {
	.dwe-book__say .dwe-hero__p   { font-size: 16px; line-height: 1.75; }
	.dwe-book__say .dwe-hero__h   { margin-bottom: 20px; }
	.dwe-book__say .dwe-hero__facts { margin-top: 34px; gap: 22px 30px; }
	.dwe-book__card { padding: 26px 20px; }
}

/* The card's heading, smaller.

   It was set at the scale of a section title and sitting in a box a third
   of the page wide, so it wrapped onto two lines and shouted over the
   button underneath — which is the thing that actually wants pressing.
   At this size it reads as a sentence introducing the button rather than
   competing with it. */
.dwe-book__ch {
	font-size: clamp(18px, 1.45vw, 21px);
	letter-spacing: -.005em;
	margin-bottom: 12px;
}

@media (max-width: 720px) {
	.dwe-book__ch { font-size: 19px; }
}

/* A little more room inside the card now that it is tall — 32px looked
   right on a small box and mean on a big one. Appended rather than merged
   into the block above because the general .dwe-book__card padding is
   declared further up the file and would otherwise win. */
@media (min-width: 1024px) {
	.dwe-book__card { padding: 40px; }
}

/* ------------------------------------------------------------------
   Space between the lines, inside the card.

   The card is as tall as the biography now, so the text inside it had
   room it was not using: three lines packed at the top of a box with a
   hand's width of empty space below them. Opening the leading spends
   that room on the thing that matters — the sentence is now as easy to
   read as the column beside it, and the gaps between kicker, heading,
   sentence and buttons are even rather than accidental.

   Sizes are untouched. This is all air.
   ------------------------------------------------------------------ */

.dwe-book__card .dwe-key__k {
	margin-bottom: 18px;
	line-height: 1.7;
}

.dwe-book__ch {
	margin-bottom: 18px;
	line-height: 1.3;
}

.dwe-book__cp {
	font-size: 15.5px;
	line-height: 2;              /* was 1.72 */
	margin-bottom: 30px;
}

.dwe-book__btns {
	gap: 14px;
}

.dwe-book__note {
	margin-top: 20px;
	line-height: 1.8;
}

/* ------------------------------------------------------------------
   The card's contents, spread over its full height.

   Matching the biography's height left the card with a tall band of
   empty space above and below a cluster of text in the middle — the
   box was symmetrical, what was inside it was not. Spacing the four
   blocks evenly from top edge to bottom edge fills it: label and
   heading at the top, the sentence under them, the two buttons, and
   the WhatsApp line sitting level with the facts across the page.

   Only on a wide screen. Below 1024px the card is its own height again
   and the ordinary margins do the work.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
	.dwe-book__card {
		justify-content: space-between;
		padding: 48px 40px;
	}

	.dwe-book__card > *,
	.dwe-book__intro > * {
		margin: 0;
	}

	.dwe-book__intro .dwe-book__ch {
		margin-top: 14px;
	}
}