/* =============================================================
   SAKSHI JETHWANI — The Draping Room

   In a colour analysis the client sits against a plain ground
   while coloured fabric is held up under her face, and the right
   colour makes her come alive. The site does the same: a quiet
   paper ground, her photographs as the constant, and each
   chapter draped in a single strong colour — never sprinkled.
   ============================================================= */

:root {
	/* Ground and type */
	--paper:    #f7f3ee;
	--paper-2:  #efe7de;
	--ink:      #1a1311;
	--ink-2:    #3d322e;
	--ink-3:    #675a54;
	--line:     rgba(26, 19, 17, 0.14);

	/* The drapes */
	--rani:     #c91f63;
	--blush:    #f6d2dd;
	--marigold: #f3a915;
	--peacock:  #0b6b66;
	--peacock-lt: #3fb2a5;
	--oxblood:  #4b1512;
	--night:    #2a0d0b;
	--on-dark:  #f8f1eb;

	--serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
	--sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Type scale */
	--t-hero:  clamp(3.1rem, 8.2vw, 10rem);
	--t-1:     clamp(2.55rem, 5.8vw, 6.4rem);
	--t-2:     clamp(2rem, 3.8vw, 4rem);
	--t-3:     clamp(1.32rem, 1.9vw, 1.95rem);
	--t-lede:  clamp(1.1rem, 1.3vw, 1.32rem);
	--t-small: 0.92rem;
	--t-label: 0.78rem;

	/* Space */
	--edge:    clamp(1.25rem, 5vw, 5.5rem);
	--max:     1480px;
	--gut:     clamp(1rem, 1.8vw, 2rem);
	/* Where a bleeding row pads itself back to the page edge. The percentage
	   resolves against the section, which excludes the scrollbar. */
	--side:    max(var(--edge), calc((100% - var(--max)) / 2 + var(--edge)));
	--chapter: clamp(4.5rem, 10vw, 10rem);
	--head:    5.25rem;

	--s-1: 0.5rem;
	--s-2: 1rem;
	--s-3: 1.5rem;
	--s-4: 2.25rem;
	--s-5: 3.5rem;
	--s-6: 5.5rem;

	--ease:  cubic-bezier(0.22, 1, 0.36, 1);
	--drape: cubic-bezier(0.76, 0, 0.24, 1);
}

/* -------------------------------------------------------------
   Base
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Browsers indent a blockquote by 40px each side, which pushes it out of a
   narrow column and widens the page on a phone. */
blockquote, figure { margin: 0; }

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 400;
	margin: 0;
	line-height: 1;
	letter-spacing: -0.02em;
}

p { margin: 0; }

::selection { background: var(--rani); color: var(--on-dark); }
:focus-visible { outline: 2px solid var(--rani); outline-offset: 3px; }

.ln { display: block; }

/* -------------------------------------------------------------
   Type
   ---------------------------------------------------------- */
.label,
.eyebrow {
	margin: 0 0 var(--s-3);
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;

	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: none;
	color: color-mix(in srgb, currentColor 74%, transparent);
}

.section-title {
	font-size: var(--t-2);
	line-height: 1;
	letter-spacing: -0.025em;
}

.section-title a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size 0.6s var(--drape);
}

.section-title a:hover { background-size: 100% 2px; }
.section-title--light { color: var(--on-dark); }

.hero__lede {
	font-size: var(--t-lede);
	line-height: 1.5;
	max-width: 42ch;
	color: color-mix(in srgb, currentColor 84%, transparent);
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

.script { font-family: var(--serif); font-style: italic; }

/* The drapes, as a pair: the colour, and the type that reads on it */
.tone-rani     { --c: var(--rani);     --on: var(--on-dark); }
.tone-marigold { --c: var(--marigold); --on: var(--ink); }
.tone-peacock  { --c: var(--peacock);  --on: var(--on-dark); }
.tone-blush    { --c: var(--blush);    --on: var(--ink); }
.tone-oxblood  { --c: var(--oxblood);  --on: var(--on-dark); }

.chip {
	display: block;
	width: 0.85rem;
	height: 0.85rem;
	background: var(--c, var(--rani));
}

/* -------------------------------------------------------------
   Links and buttons
   ---------------------------------------------------------- */
.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.1rem 1.6rem;
	border: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 500;

	line-height: 1;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: color 0.45s var(--ease);
}

/* The fill wipes across from the left, like a drape pulled over */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill, var(--rani));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.55s var(--drape);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: var(--btn-on, var(--on-dark)); }

.btn--light { background: var(--paper); color: var(--ink); --btn-fill: var(--ink); --btn-on: var(--paper); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; --btn-fill: var(--ink); --btn-on: var(--paper); }

.btn .a,
.arrow-link .a { display: none; }

.arrow-link {
	position: relative;
	display: inline-block;
	padding-bottom: 0.3rem;
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 500;
	color: inherit;
}

.arrow-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transform-origin: left;
}

/* The underline runs out to the right and draws back in from the left */
.arrow-link:hover::after { animation: redraw 0.8s var(--drape); }

@keyframes redraw {
	0%   { transform: scaleX(1); transform-origin: right; }
	45%  { transform: scaleX(0); transform-origin: right; }
	46%  { transform: scaleX(0); transform-origin: left; }
	100% { transform: scaleX(1); transform-origin: left; }
}

.arrow-link--light { color: var(--on-dark); }

/* -------------------------------------------------------------
   Header
   ---------------------------------------------------------- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--paper);
	transition: box-shadow 0.4s var(--ease);
	--btn-fill: var(--ink);
}

.masthead.is-stuck { box-shadow: 0 1px 0 var(--line); }

.masthead__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	min-height: var(--head);
	padding-block: 0.75rem;
	max-width: none;
}

.brand { display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.brand img { max-height: 3rem; width: auto; }

.brand__name {
	font-family: var(--serif);
	font-size: clamp(1.25rem, 1.55vw, 1.5rem);
	letter-spacing: -0.01em;
}

.brand__role {
	margin-top: 0.4rem;
	font-size: 0.68rem;
	font-weight: 500;

	color: color-mix(in srgb, currentColor 66%, transparent);
}

.masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); }
.masthead__nav > .btn { display: none; }

.nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }

.nav a {
	position: relative;
	display: inline-block;
	padding-block: 0.35rem;
	font-size: 0.92rem;
	white-space: nowrap;
}

.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--rani);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s var(--drape);
}

.nav a:hover::after,
.nav .current-menu-item > a::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.masthead .btn { padding: 0.95rem 1.3rem; font-size: 0.84rem; background: var(--rani); color: var(--on-dark); }

.menu-toggle,
.nav-close { display: none; }

.bar {
	background: var(--rani);
	color: var(--on-dark);
	font-size: 0.88rem;
	text-align: center;
	padding: 0.7rem var(--edge);
}

.bar a { font-weight: 600; margin-left: 0.5rem; border-bottom: 1.5px solid currentColor; white-space: nowrap; }

@media (max-width: 1100px) {
	.masthead__inner > .btn { display: none; }

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.65rem;
		padding: 0.7rem 0;
		border: 0;
		background: none;
		color: var(--ink);
		font-family: var(--sans);
		font-size: 0.85rem;
		font-weight: 500;

		cursor: pointer;
	}

	.menu-toggle::before {
		content: "";
		width: 1.6rem;
		height: 0.55rem;
		border-block: 1.5px solid currentColor;
	}

	/* Full-screen rani drape that falls from the top. It stays inside the
	   window the whole time, so it can never widen the page. */
	.masthead__nav {
		position: fixed;
		inset: 0;
		z-index: 80;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: var(--s-4);
		padding: 6rem var(--edge) calc(2.5rem + env(safe-area-inset-bottom));
		background: var(--rani);
		color: var(--on-dark);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path 0.75s var(--drape), visibility 0.75s;
		--btn-fill: var(--ink);
		--btn-on: var(--on-dark);
	}

	.masthead__nav[data-open="true"] { clip-path: inset(0 0 0 0); visibility: visible; }

	.masthead__nav .nav ul { display: block; }

	.masthead__nav .nav li {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
	}

	.masthead__nav[data-open="true"] .nav li { opacity: 1; transform: none; }
	.masthead__nav[data-open="true"] .nav li:nth-child(2) { transition-delay: 0.05s; }
	.masthead__nav[data-open="true"] .nav li:nth-child(3) { transition-delay: 0.1s; }
	.masthead__nav[data-open="true"] .nav li:nth-child(4) { transition-delay: 0.15s; }
	.masthead__nav[data-open="true"] .nav li:nth-child(5) { transition-delay: 0.2s; }
	.masthead__nav[data-open="true"] .nav li:nth-child(6) { transition-delay: 0.25s; }
	.masthead__nav[data-open="true"] .nav li:nth-child(n+7) { transition-delay: 0.3s; }

	.masthead__nav .nav a {
		display: block;
		padding-block: 0.1rem;
		font-family: var(--serif);
		font-size: clamp(2.3rem, 9.5vw, 3.6rem);
		line-height: 1.12;
		letter-spacing: -0.02em;
	}

	.masthead__nav .nav a::after { height: 3px; background: var(--on-dark); bottom: 0.35rem; }

	.masthead__nav > .btn { display: inline-flex; background: var(--ink); color: var(--on-dark); }

	.nav-close {
		display: block;
		position: absolute;
		top: 1.6rem;
		right: var(--edge);
		padding: 0.6rem 0;
		border: 0;
		background: none;
		color: inherit;
		font-family: var(--sans);
		font-size: 0.85rem;
		font-weight: 500;

		cursor: pointer;
	}
}

/* -------------------------------------------------------------
   Frame
   ---------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--edge);
}

.section { padding-block: var(--chapter); }
.section--cream2 { background: var(--paper-2); }
.section--dark { background: var(--oxblood); color: var(--on-dark); }

/* =============================================================
   HOME
   ============================================================= */

/* ---------- Opening: headline on paper, portrait draped in rani ---------- */
.open__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: 1fr auto;
	column-gap: var(--gut);
	min-height: clamp(38rem, calc(100svh - var(--head)), 60rem);
	padding-left: var(--side);
}

.open__copy {
	grid-column: 1 / span 7;
	grid-row: 1;
	align-self: center;
	position: relative;
	z-index: 2;
	padding-block: var(--s-5) var(--s-3);
}

.open__title {
	margin: 0 -9vw var(--s-4) 0;
	font-size: var(--t-hero);
	line-height: 0.9;
	letter-spacing: -0.035em;
}

.open__title .ln:nth-child(2) { padding-left: 0.6em; }

.open__lede {
	max-width: 31ch;
	margin-bottom: var(--s-4);
	font-size: var(--t-lede);
	line-height: 1.45;
	color: var(--ink-2);
}

.open__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

.open__figure {
	grid-column: 8 / -1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 3.25rem) var(--edge) clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 3vw, 3.25rem);
	background: var(--rani);
	color: var(--on-dark);
}

.open__photo { position: relative; flex: 1; min-height: 22rem; overflow: hidden; }

.open__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0%;
}

.open__caption {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	padding-top: 1rem;
}

.open__note { font-family: var(--serif); font-style: italic; font-size: var(--t-3); line-height: 1; }

.open__plate {
	max-width: 22ch;
	font-size: var(--t-label);

	line-height: 1.4;
	text-align: right;
}

.open__plate strong { display: block; font-weight: 600; }

.ledger {
	grid-column: 1 / span 7;
	grid-row: 2;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gut);
	margin: 0;
	padding: var(--s-3) var(--s-3) var(--s-5) 0;
	list-style: none;
}

.ledger__n {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--serif);
	font-size: clamp(1.9rem, 2.9vw, 3rem);
	line-height: 1;
	letter-spacing: -0.02em;
}

.ledger__n svg { width: 0.82em; height: 0.82em; fill: none; stroke: currentColor; stroke-width: 1.1; }
.ledger__l { display: block; font-size: 0.84rem; line-height: 1.35; color: var(--ink-3); }

/* ---------- It always starts within: the ground re-drapes at each step ---------- */
.inside {
	--g: var(--paper);
	--on: var(--ink);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	padding-inline: var(--side);
	background: var(--g);
	color: var(--on);
	transition: background-color 0.9s var(--drape), color 0.6s var(--ease);
}

.inside[data-step="1"] { --g: var(--blush); }
.inside[data-step="2"] { --g: var(--marigold); }
.inside[data-step="3"] { --g: var(--rani); --on: var(--on-dark); }

.inside__intro { grid-column: 1 / span 4; padding-block: var(--chapter); }
.inside__body { max-width: 36ch; margin-block: var(--s-4); color: color-mix(in srgb, currentColor 80%, transparent); }
.inside__body p + p { margin-top: 1em; }

.inside__track { grid-column: 6 / -1; position: relative; }
.inside__words { list-style: none; margin: 0; padding: var(--chapter) 0; }

.inside__word {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	align-items: baseline;
	column-gap: var(--s-2);
}

.inside__n { font-size: var(--t-label); font-weight: 500; }

.inside__w {
	font-family: var(--serif);
	font-size: clamp(2.7rem, 5.6vw, 6.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

.inside__note {
	grid-column: 2;
	max-width: 30ch;
	margin: 0.4rem 0 var(--s-3);
	font-size: var(--t-lede);
	line-height: 1.4;
}

.inside__portrait { max-width: 20rem; margin-top: var(--s-4); }
.inside__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* With JavaScript the chapter becomes a pinned stage the reader scrolls through */
.inside.is-story .inside__intro {
	position: sticky;
	top: var(--head);
	align-self: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--head));
	padding-block: var(--s-4);
}

.inside.is-story .inside__track { height: calc(var(--steps) * 65svh + 100svh - var(--head)); }

.inside.is-story .inside__stage {
	position: sticky;
	top: var(--head);
	display: flex;
	align-items: center;
	height: calc(100svh - var(--head));
}

.inside.is-story .inside__words { width: 100%; padding: 0; }
.inside.is-story .inside__word { opacity: 0.2; transition: opacity 0.6s var(--ease); }
.inside.is-story .inside__word.is-past { opacity: 0.5; }
.inside.is-story .inside__word.is-on { opacity: 1; }

.inside.is-story .inside__note {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.7s var(--drape), margin 0.7s var(--drape), opacity 0.5s var(--ease);
}

.inside.is-story .inside__word.is-on .inside__note { max-height: 6rem; margin: 0.45rem 0 1rem; opacity: 1; }

/* Her portrait arrives on the last word — Image */
.inside.is-story .inside__portrait {
	position: absolute;
	right: 0;
	bottom: 9%;
	width: clamp(12rem, 18vw, 19rem);
	margin: 0;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.1s var(--drape);
}

.inside.is-story.is-last .inside__portrait { clip-path: inset(0 0 0 0); }

/* ---------- Framework (shared with interior pages): oxblood ---------- */
.framework {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	min-height: clamp(36rem, 52vw, 56rem);
	background: var(--ink);
	color: var(--on-dark);
	--btn-fill: var(--rani);
	--btn-on: var(--on-dark);
}

.framework__media { position: relative; min-height: 26rem; overflow: hidden; }

.framework__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only as dark as the words standing on it need */
.framework__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(42, 13, 11, 0.86) 0%, rgba(42, 13, 11, 0.36) 32%, rgba(42, 13, 11, 0) 58%);
	pointer-events: none;
}

.framework__over { position: absolute; z-index: 1; left: var(--edge); right: var(--s-4); bottom: var(--s-4); }

.framework__big {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.6vw, 3.9rem);
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
}

.framework__big i { display: none; }

.framework__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: var(--s-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-label);
	font-weight: 500;

	color: var(--rani);
}

.framework__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: var(--chapter) var(--edge) var(--chapter) clamp(2rem, 6vw, 7rem);
}

.framework__lede {
	max-width: 40ch;
	margin-top: var(--s-3);
	font-size: var(--t-lede);
	line-height: 1.45;
	color: color-mix(in srgb, currentColor 80%, transparent);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4) var(--gut);
	width: 100%;
	margin-block: var(--s-5);
}

.pillars__item { position: relative; padding-top: 1.35rem; }

/* A swatch of each colour; it runs the full width when pointed at */
.pillars__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2.5rem;
	height: 6px;
	background: var(--c, var(--rani));
	transition: width 0.8s var(--drape);
}

.pillars__item:hover::before { width: 100%; }
/* One accent colour for every swatch — not four competing hues. */

.pillars__t { margin-bottom: 0.5rem; font-size: var(--t-3); }
.pillars__d { font-size: var(--t-small); line-height: 1.55; color: color-mix(in srgb, currentColor 74%, transparent); }

/* ---------- The work: an index whose rows take their colour ---------- */
.work { padding-block: var(--chapter); }

.work__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	row-gap: var(--s-3);
	align-items: end;
}

.work__head > :first-child { grid-column: 1 / span 8; }
.work__aside { grid-column: 9 / -1; }
.work__aside p { max-width: 34ch; margin-bottom: var(--s-3); color: var(--ink-3); }

.work__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.work__item { position: relative; border-top: 1px solid var(--line); }
.work__item:last-child { border-bottom: 1px solid var(--line); }

.work__item::before {
	content: "";
	position: absolute;
	inset: -1px 0;
	background: var(--c);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.6s var(--drape);
}

.work__item:hover::before,
.work__item:focus-within::before { transform: scaleY(1); transform-origin: top; }

.work__link {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	align-items: center;
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(1.4rem, 2.3vw, 2.3rem) var(--edge);
	transition: color 0.45s var(--ease);
}

.work__item:hover .work__link,
.work__item:focus-within .work__link { color: var(--on); }

.work__name {
	grid-column: 1 / span 7;
	font-family: var(--serif);
	font-size: var(--t-2);
	line-height: 1;
	letter-spacing: -0.025em;
	transition: transform 0.6s var(--drape);
}

.work__item:hover .work__name { transform: translateX(1.25rem); }

.work__lede {
	grid-column: 9 / -1;
	font-size: var(--t-small);
	line-height: 1.5;
	color: color-mix(in srgb, currentColor 76%, transparent);
}

.work__img { display: none; }

.work__preview {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 50;
	width: clamp(13rem, 17vw, 18rem);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

.work__preview.is-on { opacity: 1; }
.work__preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Workshop (shared): a rani poster ---------- */
.workshop {
	background: var(--rani);
	color: var(--on-dark);
	--btn-fill: var(--ink);
	--btn-on: var(--on-dark);
}

.workshop--cream { background: var(--rani); }

.workshop__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	align-items: stretch;
	max-width: none;
	margin: 0;
	padding-left: var(--side);
	padding-right: 0;
}

.workshop__body { align-self: center; padding-block: var(--chapter); }
.workshop .section-title { font-size: var(--t-1); line-height: 0.95; }
.workshop__copy { max-width: 40ch; margin-block: var(--s-4); color: color-mix(in srgb, currentColor 86%, transparent); }
.workshop__copy p + p { margin-top: 1em; }

.workshop__facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-4); }
.workshop__facts dt { font-size: var(--t-label); font-weight: 500; color: color-mix(in srgb, currentColor 76%, transparent); }
.workshop__facts dd { margin: 0.3rem 0 0; font-family: var(--serif); font-size: var(--t-3); line-height: 1.05; }

.workshop__media { position: relative; min-height: clamp(26rem, 46vw, 46rem); overflow: hidden; }

.workshop__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The line cut into the foot of the photograph, on the poster's own colour */
.workshop__card {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	max-width: 16ch;
	margin: 0;
	padding: var(--s-3) var(--s-4) 0 0;
	background: var(--rani);
	color: var(--on-dark);
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--t-3);
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transform: none;
	text-align: left;
}

.workshop__script {
	position: absolute;
	top: var(--s-3);
	right: var(--edge);
	z-index: 1;
	margin: 0;
	padding: 0.55rem 0.8rem;
	background: var(--ink);
	color: var(--on-dark);
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 600;

	transform: none;
}

/* ---------- The signature: peacock ---------- */
.sig {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	align-items: center;
	padding-right: var(--side);
	background: var(--ink);
	color: var(--on-dark);
}

.sig__photo {
	grid-column: 1 / span 6;
	align-self: stretch;
	position: relative;
	min-height: clamp(32rem, 58vw, 54rem);
	overflow: hidden;
}

.sig__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08);
}

.sig__copy { grid-column: 8 / -1; padding-block: var(--chapter); }
.sig__title { font-size: var(--t-1); line-height: 0.95; }
.sig__body { max-width: 42ch; margin-block: var(--s-4); color: color-mix(in srgb, currentColor 84%, transparent); }

.sig__quote {
	max-width: 20ch;
	margin-top: var(--s-5);
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--t-3);
	line-height: 1.15;
	color: var(--rani);
}

/* ---------- Why women choose Sakshi ---------- */
.choose {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	max-width: var(--max);
	margin-inline: auto;
	padding: var(--chapter) var(--edge);
}

.choose__intro {
	grid-column: 1 / span 5;
	align-self: start;
	position: sticky;
	top: calc(var(--head) + var(--s-4));
}

.choose__intro .section-title { font-size: var(--t-1); line-height: 0.95; }
.choose__lede { max-width: 40ch; margin-block: var(--s-4); color: var(--ink-3); }

.choose__list { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; }

.choose__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--s-3);
	padding-block: var(--s-4);
}

.choose__item + .choose__item { border-top: 1px solid var(--line); }
.choose__item .chip { grid-row: 1 / span 2; margin-top: 0.55rem; }
.choose__t { font-size: var(--t-3); line-height: 1.1; }
.choose__d { grid-column: 2; max-width: 48ch; margin-top: 0.6rem; color: var(--ink-3); }

/* ---------- The spotlight: a strip that runs off the page ---------- */
.spot {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	align-items: end;
	padding: var(--chapter) 0 var(--chapter) var(--side);
	background: var(--paper-2);
}

.spot__body { max-width: 34ch; margin-block: var(--s-3) var(--s-4); color: var(--ink-3); }

.spot__strip {
	--h: clamp(20rem, 32vw, 30rem);
	display: flex;
	gap: var(--gut);
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
}

.spot__strip::-webkit-scrollbar { display: none; }
.spot__strip::after { content: ""; flex: 0 0 calc(var(--edge) - var(--gut)); }
.spot__strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.spot__strip > * { flex: none; scroll-snap-align: start; }

.spot__item img {
	width: auto;
	max-width: none;
	height: var(--h);
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: multiply;
	-webkit-user-drag: none;
}

.spot__item figcaption { max-width: 26ch; margin-top: 0.8rem; font-size: var(--t-small); line-height: 1.4; color: var(--ink-3); }

.spot__quote,
.spot__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: var(--h);
	padding: var(--s-4);
}

.spot__quote { width: clamp(16rem, 23vw, 22rem); background: var(--rani); color: var(--on-dark); }
.spot__quote p { font-family: var(--serif); font-size: var(--t-2); line-height: 0.98; letter-spacing: -0.02em; }
.spot__quote cite { margin-top: var(--s-3); font-size: var(--t-label); font-style: normal; }

.spot__card { width: clamp(14rem, 19vw, 19rem); background: var(--blush); color: var(--ink); }
.spot__words { font-family: var(--serif); font-size: var(--t-2); line-height: 0.98; letter-spacing: -0.02em; }
.spot__card > span { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.4; }

/* ---------- The call and the footer (every page) ---------- */
.call { background: var(--rani); color: var(--on-dark); --btn-fill: var(--ink); --btn-on: var(--on-dark); }

.call__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	row-gap: var(--s-3);
	align-items: end;
	padding-block: var(--chapter);
}

.call__title { grid-column: 1 / span 8; grid-row: 1 / span 2; font-size: var(--t-1); line-height: 0.95; letter-spacing: -0.03em; }
.call__body { grid-column: 9 / -1; max-width: 32ch; font-size: var(--t-lede); line-height: 1.45; }
.call .btn { grid-column: 9 / -1; justify-self: start; }

.site-foot { padding-top: clamp(3.5rem, 7vw, 6rem); background: var(--night); color: var(--on-dark); }
.site-foot :focus-visible { outline-color: var(--rani); }

.site-foot__top {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	row-gap: var(--s-4);
	align-items: start;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.site-foot .brand { grid-column: 1 / span 5; }
.site-foot .brand__name { font-size: var(--t-2); }
.site-foot .brand__role { margin-top: 0.7rem; font-size: var(--t-label); }

.site-foot__nav { grid-column: 7 / span 4; }
.site-foot__nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gut); }
.site-foot__nav li { margin: 0 0 0.6rem; }
.site-foot__nav a { font-size: 0.98rem; transition: color 0.3s var(--ease); }
.site-foot__nav a:hover { color: var(--rani); }

.socials { grid-column: 11 / -1; display: flex; justify-content: flex-end; gap: 0.7rem; }

.socials a {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 26%, transparent);
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.socials a:hover { background: var(--rani); color: var(--on-dark); }
.socials svg { width: 1rem; height: 1rem; fill: currentColor; }

.site-foot__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-block: 1.5rem 2rem;
	border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--on-dark) 66%, transparent);
}

.site-foot__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-foot__base a:hover { color: var(--rani); }

/* =============================================================
   INTERIOR PAGES — the same components, draped the same way
   ============================================================= */

/* Each page opens on its own colour plane */
main > .section--cream2:first-child {
	padding-block: clamp(4.5rem, 10vw, 10rem) clamp(3rem, 6vw, 6rem) !important;
	background: var(--head-bg, var(--blush));
	color: var(--head-on, var(--ink));
}

main > .section--cream2:first-child .section-title { max-width: 16ch; font-size: var(--t-1); line-height: 0.95; letter-spacing: -0.03em; }
main > .section--cream2:first-child .hero__lede { max-width: 46ch; margin-top: var(--s-4) !important; }

.slug-about                              { --head-bg: var(--blush); }
.slug-services, .slug-contact,
.slug-workshops, .slug-iconic-you,
.slug-editorial, .slug-media             { --head-bg: var(--blush); }
.single-sj_service                       { --head-bg: var(--blush); }
.single-sj_workshop                      { --head-bg: var(--rani); --head-on: var(--on-dark); }
.blog, .archive, .search, .single-post,
.error404                                { --head-bg: var(--paper-2); }

/* Two columns, off-centre */
.philosophy__grid,
.why__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	row-gap: var(--s-5);
	align-items: start;
}

.philosophy__grid > :first-child { grid-column: 1 / span 5; }
.philosophy__grid > :last-child  { grid-column: 7 / -1; }
.philosophy__grid--flip > :first-child { grid-column: 8 / -1; order: 2; }
.philosophy__grid--flip > :last-child  { grid-column: 1 / span 6; order: 1; }

.why__grid { align-items: center; }
.why__grid > :first-child { grid-column: 1 / span 6; }
.why__grid > :last-child  { grid-column: 8 / -1; }

.philosophy__rule { width: 3rem; height: 6px; margin: var(--s-4) 0; background: var(--rani); }
.philosophy__body { max-width: 44ch; margin-bottom: var(--s-4); color: color-mix(in srgb, currentColor 82%, transparent); }
.philosophy__body p + p { margin-top: 1em; }
.philosophy__body--wide { max-width: 56ch; }
.why__copy { max-width: 44ch; margin-block: var(--s-4); color: color-mix(in srgb, currentColor 82%, transparent); }

/* Services head */
.services__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	row-gap: var(--s-3);
	align-items: end;
	margin-bottom: var(--s-5);
}

.services__head > :first-child { grid-column: 1 / span 7; }
.services__aside { grid-column: 9 / -1; color: color-mix(in srgb, currentColor 78%, transparent); }
.services__aside .arrow-link { margin-top: var(--s-3); }

/* Sequences */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--gut); }
.steps--3, .steps--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.steps__n {
	display: block;
	margin-bottom: var(--s-2);
	font-family: var(--serif);
	font-size: var(--t-2);
	line-height: 1;
	color: var(--rani);
}

.section--dark .steps__n,
main > .section--cream2:first-child .steps__n { color: inherit; }

.steps__t { margin-bottom: 0.5rem; font-size: var(--t-3); }
.steps__d { font-size: var(--t-small); line-height: 1.55; color: color-mix(in srgb, currentColor 74%, transparent); }

/* Figures */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--gut); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats__item { min-width: 0; }
.stats__n { display: block; margin-bottom: 0.5rem; font-family: var(--serif); font-size: var(--t-2); line-height: 1; }
.stats__n svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.1; }
.stats__l { font-size: var(--t-small); line-height: 1.4; color: color-mix(in srgb, currentColor 74%, transparent); }

/* Photographs */
.iconic__media { position: relative; height: 100%; min-height: 22rem; overflow: hidden; }
.iconic__media img { width: 100%; height: 100%; object-fit: cover; }
.iconic__media--photo { height: clamp(24rem, 40vw, 40rem); }

.iconic__quote {
	padding: var(--s-4);
	background: var(--rani);
	color: var(--on-dark);
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--t-3);
	line-height: 1.15;
}

.iconic__quote i { display: none; }

/* Other services */
.svc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.svc { display: block; }
.svc__n { display: none; }
.svc__img { display: block; aspect-ratio: 4 / 5; margin-bottom: 0.9rem; overflow: hidden; background: var(--paper-2); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc:hover .svc__img img { transform: scale(1.05); }
.svc__t { font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; }

/* Reasons */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gut); }
.reasons__item { position: relative; padding-top: 1.3rem; }
.reasons__item::before { content: ""; position: absolute; left: 0; top: 0; width: 0.85rem; height: 0.85rem; background: var(--c, var(--rani)); }
/* One accent colour for every swatch, to match. */
.reasons__item svg { display: none; }
.reasons__item p { font-family: var(--serif); font-size: var(--t-3); line-height: 1.1; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.tile--land { aspect-ratio: 4 / 3; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile-cap { max-width: 34ch; margin-top: 0.8rem; font-size: var(--t-small); line-height: 1.45; color: color-mix(in srgb, currentColor 72%, transparent); }

.tile--card,
.tile--quote {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--s-3);
	text-align: left;
}

.tile--card { background: var(--blush); color: var(--ink); }
.tile--card b { font-family: var(--serif); font-weight: 400; font-style: normal; font-size: var(--t-3); line-height: 1.02; }
.tile--card span { margin-top: 0.8rem; font-size: var(--t-small); line-height: 1.4; }
.tile--card i { display: none; }

.tile--quote { background: var(--rani); color: var(--on-dark); font-family: var(--serif); font-size: var(--t-3); line-height: 1.08; }
.tile--quote em { display: block; margin-bottom: 0.15em; font-style: normal; font-size: 2.6em; line-height: 0.6; }
.tile--quote span { display: block; margin-top: 1rem; font-family: var(--sans); font-style: normal; font-size: var(--t-label); }

/* What a service covers */
.covers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	column-gap: var(--gut);
	margin: var(--s-3) 0 0;
	padding: 0;
	list-style: none;
}

.covers li { position: relative; padding: 0.65rem 0 0.65rem 1.4rem; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); line-height: 1.45; }
.covers li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.55rem; height: 0.55rem; background: var(--rani); }

/* Programme tiers — the one place a panel earns its keep */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--s-5); }

.tier {
	display: flex;
	flex-direction: column;
	padding: var(--s-4) var(--s-3) var(--s-3);
	border-top: 6px solid var(--c, var(--ink));
	background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.tier { --c: var(--rani); }

.tier--featured { background: var(--ink); color: var(--on-dark); border-top-color: var(--rani); --c: var(--rani); --btn-fill: var(--rani); --btn-on: var(--on-dark); }

.tier__name { font-size: var(--t-3); line-height: 1.05; }
.tier__meta { margin: 0.5rem 0 1.25rem; font-size: var(--t-label); font-weight: 500; color: color-mix(in srgb, currentColor 72%, transparent); }
.tier__price { margin-bottom: 1rem; font-family: var(--serif); font-size: var(--t-2); line-height: 1; }
.tier__for { margin-bottom: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); color: color-mix(in srgb, currentColor 80%, transparent); }
.tier__list { margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.tier__list li { position: relative; padding: 0.5rem 0 0.5rem 1.25rem; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); font-size: var(--t-small); line-height: 1.45; }
.tier__list li:last-child { border-bottom: 0; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.45rem; height: 0.45rem; background: var(--c); }
.tier__foot { margin-top: auto; }
.tier__foot .btn { width: 100%; }
.tier--featured .tier__foot .btn { background: var(--paper); color: var(--ink); }

/* Enquiry form */
.form { max-width: 44rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gut); margin-bottom: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field--trap { position: absolute; left: -9999px; }
.field label { font-size: var(--t-label); font-weight: 500; }

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 0.7rem 0;
	border: 0;
	border-bottom: 1.5px solid color-mix(in srgb, currentColor 32%, transparent);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.05rem;
	transition: border-color 0.3s var(--ease);
}

.field textarea { min-height: 6rem; resize: vertical; }
.field select { appearance: none; cursor: pointer; }
.field option { background: var(--paper); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--rani); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.form__status { max-width: 36ch; font-size: var(--t-small); color: color-mix(in srgb, currentColor 74%, transparent); }
.form__status[data-state="error"] { color: #a3122f; }
.form.is-sending .btn { opacity: 0.55; pointer-events: none; }
.form.is-done .form__grid, .form.is-done .form__foot .btn { display: none; }
.form.is-done .form__status { max-width: 30ch; font-family: var(--serif); font-size: var(--t-3); line-height: 1.15; color: inherit; }

/* Editor content */
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte p { max-width: 62ch; margin-bottom: 1.1rem; }
.rte h2, .rte h3, .rte h4 { margin: 2rem 0 0.8rem; }
.rte h3 { font-size: var(--t-3); }
.rte ul, .rte ol { max-width: 62ch; margin: 0 0 1.1rem; padding-left: 1.1em; }
.rte li { margin-bottom: 0.35em; }
.rte a { color: var(--rani); text-decoration: underline; text-underline-offset: 0.2em; }
.rte blockquote { margin: 1.6rem 0; padding-left: 1.4rem; border-left: 6px solid var(--rani); font-family: var(--serif); font-style: italic; font-size: var(--t-3); line-height: 1.2; }
.rte img { margin: 1.6rem 0; }
.entry-content { max-width: 62ch; }

/* Journal */
.post-list { display: grid; gap: var(--s-4); }
.post-row { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.post-row__date { font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.post-row__title { margin: 0.6rem 0 0.7rem; font-size: var(--t-3); }
.pagination { display: flex; gap: 0.9rem; margin-top: var(--s-4); }
.pagination .current { color: var(--rani); }

/* WordPress */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 0.75rem 1.1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { left: 1rem; top: 1rem; }
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }

/* =============================================================
   RESPONSIVE — recomposed, not stacked
   ============================================================= */
@media (max-width: 1100px) {
	.open__title { margin-right: -4vw; }
	.work__name { grid-column: 1 / span 8; }
	.work__lede { grid-column: 9 / -1; }
}

@media (max-width: 900px) {
	:root { --head: 4.5rem; }

	/* Opening: headline first, its last line lands on the rani plane, the
	   portrait sits off to the right of a band of colour. */
	.open__grid { display: flex; flex-direction: column; min-height: 0; padding: 0; }
	.open__copy { display: contents; }
	.open__kicker { order: 1; margin: 0; padding: var(--s-4) var(--edge) var(--s-2); }

	.open__title {
		order: 2;
		position: relative;
		z-index: 2;
		margin: 0 0 calc(var(--t-hero) * -0.9);
		padding-inline: var(--edge);
	}

	.open__title .ln:nth-child(2) { padding-left: 0.45em; }

	.open__figure {
		order: 3;
		padding: calc(var(--t-hero) * 0.9 + 1rem) var(--edge) var(--s-3) 22vw;
	}

	.open__photo { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
	.open__caption { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
	.open__plate { text-align: left; }
	.open__lede { order: 4; margin: 0; padding: var(--s-4) var(--edge) 0; }
	.open__actions { order: 5; padding: var(--s-3) var(--edge) 0; }
	.ledger { order: 6; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); padding: var(--s-5) var(--edge) var(--s-4); }

	/* It always starts within: introduction first, then the pinned words */
	.inside { display: block; padding-inline: var(--edge); }
	.inside__intro { padding-block: var(--chapter) var(--s-4); }
	.inside.is-story .inside__intro { position: static; display: block; min-height: 0; padding-block: var(--chapter) var(--s-2); }
	.inside.is-story .inside__track { height: calc(var(--steps) * 55svh + 100svh - var(--head)); }
	.inside.is-story .inside__stage { align-items: flex-end; padding-bottom: 10svh; }
	.inside__w { font-size: clamp(2.6rem, 12.5vw, 4.4rem); }
	.inside__word { grid-template-columns: 2.4rem 1fr; }
	.inside.is-story .inside__portrait { top: 6svh; bottom: auto; width: 44vw; }

	/* Framework: the portrait carries its words, the four swatches become a column */
	.framework { grid-template-columns: 1fr; min-height: 0; }
	.framework__media { min-height: 0; aspect-ratio: 4 / 5; }
	.framework__body { padding: var(--s-5) var(--edge) var(--chapter); }
	.pillars { grid-template-columns: 1fr; gap: var(--s-3); }
	.pillars__item { padding: 0 0 0 1.5rem; }
	.pillars__item::before { top: 0.3rem; width: 6px; height: calc(100% - 0.3rem); }
	.pillars__item:hover::before { width: 6px; }

	/* The work: a strip of plates to swipe */
	.work__head > :first-child, .work__aside { grid-column: 1 / -1; }
	.work__list { display: flex; gap: var(--gut); margin-top: var(--s-4); padding-inline: var(--edge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; }
	.work__list::-webkit-scrollbar { display: none; }
	.work__list::after { content: ""; flex: 0 0 1px; }
	.work__item, .work__item:last-child { flex: 0 0 76%; border: 0; scroll-snap-align: start; }
	.work__item::before { display: none; }
	.work__link { display: flex; flex-direction: column; height: 100%; padding: 0; background: var(--c); color: var(--on); }
	.work__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
	.work__img img { width: 100%; height: 100%; object-fit: cover; }
	.work__name { padding: 1rem 1rem 0.4rem; font-size: 1.75rem; transform: none !important; }
	.work__lede { padding: 0 1rem 1.2rem; font-size: 0.88rem; }

	/* Workshop: the photograph leads */
	.workshop__grid { grid-template-columns: 1fr; padding: 0; }
	.workshop__media { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
	.workshop__body { padding: var(--s-5) var(--edge) var(--chapter); }

	/* Signature: title, then the photograph offset against the colour */
	.sig { display: flex; flex-direction: column; align-items: stretch; padding: var(--chapter) 0 0; }
	.sig__copy { display: contents; }
	.sig__copy > * { padding-inline: var(--edge); }
	.sig__kicker { order: 1; }
	.sig__title { order: 2; margin-bottom: var(--s-4); }
	.sig__photo { order: 3; min-height: 0; aspect-ratio: 4 / 5; margin-left: 18vw; }
	.sig__body { order: 4; margin-block: var(--s-4) var(--s-3); }
	.sig__link { order: 5; }
	.sig__quote { order: 6; margin: var(--s-5) 0 0; padding-block: 0 var(--chapter); }

	/* Why and the spotlight */
	.choose { display: block; }
	.choose__intro { position: static; margin-bottom: var(--s-4); }

	.spot { grid-template-columns: 1fr; row-gap: var(--s-4); padding: var(--chapter) 0; }
	.spot__head { padding-inline: var(--edge); }
	.spot__strip { --h: 24rem; padding-left: var(--edge); scroll-padding-inline: var(--edge); }

	/* Call and footer */
	.call__title, .call__body, .call .btn { grid-column: 1 / -1; grid-row: auto; }
	.site-foot .brand, .site-foot__nav, .socials { grid-column: 1 / -1; }
	.socials { justify-content: flex-start; }

	/* Interior */
	.philosophy__grid > :first-child, .philosophy__grid > :last-child,
	.philosophy__grid--flip > :first-child, .philosophy__grid--flip > :last-child,
	.why__grid > :first-child, .why__grid > :last-child,
	.services__head > :first-child, .services__aside { grid-column: 1 / -1; order: 0; }
	.steps, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc-row, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tiers { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.steps--3, .steps--six, .stats--3, .tiles--3, .reasons, .form__grid { grid-template-columns: 1fr; }
	.tiles > div[style] { grid-column: auto !important; }
	.workshop__facts { gap: var(--s-3); }
	.site-foot__nav ul { columns: 2; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Small pieces */
.open { position: relative; }
.eyebrow--dark { color: color-mix(in srgb, currentColor 74%, transparent); }
.to-top { color: inherit; }
.to-top svg { stroke: currentColor; }

/* Review pass 1 */
@media (min-width: 901px) { .open__figure { padding-top: 0; } }
.ledger__n { font-weight: 500; }

/* Review pass 2 — desktop */

/* The index shows its colours at rest, not only on hover: each service
   carries its drape as a swatch, which the row's wash then absorbs. */
.work__name::before {
	content: "";
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	margin-right: 0.4em;
	vertical-align: 0.2em;
	background: var(--c);
	transition: background-color 0.45s var(--ease);
}

.work__item:hover .work__name::before { background: var(--on); }

/* The workshop line sits wholly inside the poster */
.workshop__card { padding: var(--s-3) var(--s-4) var(--s-4) 0; }

/* Blush disappears against paper; on light grounds that swatch turns teal */
.choose__item.tone-blush { --c: var(--peacock-lt); }

@media (max-width: 900px) {
	.work__name::before { display: none; }
	.workshop__card { padding: var(--s-2) var(--s-3) var(--s-2) var(--edge); }
}

/* The headline stops just short of the drape: a sliver of a letter over
   the edge read as an overflow, not a decision. */
@media (min-width: 901px) {
	.open__title .ln:nth-child(2) { padding-left: 0.6em; }
	.open__copy { grid-column: 1 / span 8; }
}

/* Mobile: the pinned words sit in the middle of the drape, not at its foot */
@media (max-width: 900px) {
	.inside.is-story .inside__stage { align-items: center; padding-bottom: 0; }
}

@media (max-width: 1100px) {
	/* The underline belongs to the word, not the column */
	.masthead__nav .nav a { display: inline-block; }
}

/* Review pass 3 — interior */

/* Quotes and cards in a tile row: sized by their words, not stretched to a
   portrait frame, and each in a different drape so a row never repeats. */
.tile--quote,
.tile--card { aspect-ratio: auto; min-height: clamp(12rem, 17vw, 17rem); }

/* Every quote tile stays the one accent colour, rather than cycling through others. */

/* Facts inside a coloured band are often words, not numbers ("First batch,
   date announcing soon") — set them at reading size so they stay one line. */
.workshop .stats__n,
.framework .stats__n { font-size: var(--t-3); line-height: 1.1; }

/* Documentary photographs — events, colleges, the press — are shown as a
   record, in monochrome. Pointing at one drapes its colour back in. */
.tiles { grid-auto-flow: row dense; }
/* Only an actual newspaper clipping is shown in black and white; every
   photograph — session, award, press event — keeps its real colour. */
.tile--clip img { filter: grayscale(1) contrast(1.05); transition: filter 0.8s var(--ease), transform 1.2s var(--ease); }
.tile--clip:hover img { filter: none; }


/* =============================================================
   SOFT DRAPE — page hygiene system. Appended after everything in
   theme.css so it wins by order, never by !important.
   ============================================================= */

:root {
	/* Type that survives a 305px phone */
	--t-hero:  clamp(2.6rem, 6.8vw, 8.5rem);
	--t-1:     clamp(2.25rem, 5.4vw, 6rem);
	--t-2:     clamp(1.85rem, 3.6vw, 3.75rem);

	/* Rhythm */
	--chapter:    clamp(4.75rem, 2.5rem + 7.5vw, 10.5rem);
	--gap-kicker: clamp(0.9rem, 0.6rem + 0.8vw, 1.35rem);
	--gap-title:  clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
	--gap-action: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	--gap-block:  clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
	--gap-item:   clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	--pad-panel:  clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
	--pad-photo:  clamp(1rem, 0.6rem + 1.4vw, 2rem);

	/* Radius */
	--r-xs:   4px;
	--r-sm:   10px;
	--r-md:   clamp(14px, 1.4vw, 20px);
	--r-lg:   clamp(18px, 2.2vw, 32px);
	--r-xl:   clamp(24px, 3.4vw, 56px);
	--r-pill: 999px;

	--swatch-w: 2.5rem;
	--swatch-h: 5px;
}

/* ---------- Wrap hygiene ---------- */
:is(p, li, dd, dt, figcaption, blockquote, .rte, .tile-cap, .ledger__l, .stats__l) { text-wrap: pretty; }
:is(h1, h2, h3, .section-title, .call__title, .framework__big, .inside__w, .work__name, .choose__t,
	.pillars__t, .steps__t, .tier__name, .svc__t, .spot__words, .spot__quote p, .sig__quote,
	.iconic__quote, .tile--quote, .tile--card b, .open__note, .ln, .ln > span) { text-wrap: balance; }
:is(h1, h2, h3, .section-title) { overflow-wrap: break-word; }
.label, .eyebrow { max-width: 40ch; text-wrap: balance; }
.site-foot__legal a, .rte a { overflow-wrap: anywhere; }

/* Kicker made of roles: breaks only between roles, and the separator
   that would start a line is clipped away. */
.kick { overflow: hidden; }
.kick__in { display: flex; flex-wrap: wrap; margin-left: -1.2em; row-gap: 0.1em; }
.kick__part { white-space: nowrap; }
.kick__part::before { content: "\00B7"; display: inline-block; width: 1.2em; text-align: center; }

/* ---------- Radius ---------- */
.btn { border-radius: var(--r-pill); padding: 1.05rem 1.75rem; }
.masthead .btn { padding: 0.9rem 1.4rem; }

.open__photo, .framework__media, .workshop__media, .sig__photo, .iconic__media, .inside__portrait {
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
}

.tile, .svc__img, .work__preview, .spot__item img, .spot__quote, .spot__card, .rte img { border-radius: var(--r-md); }
.tile { isolation: isolate; }
.iconic__quote, .tier { border-radius: var(--r-lg); }

.chip,
.choose__item .chip { width: var(--swatch-w); height: var(--swatch-h); border-radius: var(--r-pill); }
.philosophy__rule { width: var(--swatch-w); height: var(--swatch-h); border-radius: var(--r-pill); }
.pillars__item::before { width: var(--swatch-w); height: var(--swatch-h); border-radius: var(--r-pill); }
.reasons__item::before { width: var(--swatch-w); height: var(--swatch-h); border-radius: var(--r-pill); }
.covers li::before, .tier__list li::before { width: 0.4rem; height: 0.4rem; border-radius: 50%; }

.workshop__script { top: var(--pad-photo); right: var(--pad-photo); padding: 0.5rem 0.95rem; border-radius: var(--r-pill); }
.workshop__card { max-width: 18ch; padding: 0.9rem var(--pad-panel) var(--pad-photo) var(--pad-photo); border-radius: 0 var(--r-md) 0 0; }
.framework__over { left: var(--pad-photo); right: var(--pad-photo); bottom: var(--pad-photo); }

.tier { border-top: 0; padding: var(--pad-panel); }
.tier::before { content: ""; display: block; width: var(--swatch-w); height: var(--swatch-h); margin-bottom: 1.25rem; border-radius: var(--r-pill); background: var(--c); }
.tile--card, .tile--quote, .iconic__quote { padding: var(--pad-panel); }

.field input, .field select, .field textarea {
	padding: 0.95rem 1.1rem;
	border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, #fff 55%, transparent);
}
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--rani);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--rani) 16%, transparent);
}

/* ---------- Shared rhythm ---------- */
.label, .eyebrow { margin-bottom: var(--gap-kicker); }
.masthead__inner { max-width: var(--max); }

/* ---------- The page grid (desktop): same 12 columns in every chapter ---------- */
@media (min-width: 901px) {
	.open__grid, .inside, .framework, .workshop__grid, .sig, .spot {
		--colw: calc((min(100%, var(--max)) - 2 * var(--edge) - 11 * var(--gut)) / 12);
		display: grid;
		grid-template-columns:
			[bleed-start] minmax(var(--edge), 1fr)
			[content-start] repeat(11, [col-start] minmax(0, var(--colw)) [col-end] var(--gut))
			[col-start] minmax(0, var(--colw)) [col-end content-end]
			minmax(var(--edge), 1fr) [bleed-end];
		column-gap: 0;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* Opening */
	.open { padding-bottom: var(--gap-block); }
	.open__grid {
		grid-template-rows: minmax(clamp(34rem, calc(100svh - var(--head) - 7rem), 52rem), auto) auto;
		min-height: 0;
		isolation: isolate;
	}
	.open__grid::before {
		content: "";
		grid-column: col-start 7 / bleed-end;
		grid-row: 1;
		margin-top: clamp(0.5rem, 1vw, 1rem);
		border-radius: var(--r-xl) 0 0 var(--r-xl);
		background: var(--rani);
		z-index: -1;
	}
	.open__copy { grid-column: content-start / col-end 6; grid-row: 1; align-self: center; padding-block: var(--gap-block); }
	.open__title { margin: 0 0 var(--gap-title); }
	.open__title .ln:nth-child(2) { padding-left: 0; }
	.open__lede { margin-bottom: var(--gap-action); }
	.open__figure {
		grid-column: col-start 8 / content-end;
		grid-row: 1;
		padding: calc(var(--edge) + clamp(0.5rem, 1vw, 1rem)) 0 var(--pad-panel);
		background: none;
	}
	.ledger {
		grid-column: content-start / content-end;
		grid-row: 2;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--gut);
		margin-top: var(--gap-item);
		padding: var(--gap-item) 0 0;
		border-top: 1px solid var(--line);
	}

	/* It always starts within */
	.inside__intro { grid-column: content-start / col-end 5; }
	.inside__track { grid-column: col-start 7 / content-end; }
	.inside__word { margin-left: calc(-3.25rem - var(--s-2)); }

	/* Framework */
	.framework { min-height: 0; padding-block: var(--chapter); align-items: center; }
	.framework__media { grid-column: content-start / col-end 5; align-self: stretch; min-height: clamp(32rem, 46vw, 48rem); }
	.framework__body { grid-column: col-start 7 / content-end; padding: 0; }
	.framework:not(:has(> .framework__media)) .framework__body { grid-column: content-start / col-end 8; }

	/* The work */
	.work__head > :first-child { grid-column: 1 / span 6; }
	.work__aside { grid-column: 7 / -1; }
	.work__list { max-width: var(--max); margin: var(--gap-block) auto 0; padding-inline: var(--edge); }
	.work__link { max-width: none; padding-inline: 0; }
	.work__item::before { inset: 0.4rem calc(-1 * var(--s-3)); border-radius: var(--r-md); }
	.work__name { grid-column: 1 / span 6; position: relative; }
	.work__name::before { position: absolute; right: calc(100% + 0.4em); top: 0.38em; width: 0.26em; height: 0.26em; margin: 0; border-radius: 50%; }
	.work__lede { grid-column: 7 / -1; max-width: 44ch; }

	/* Workshop */
	.workshop__grid { padding-block: var(--chapter); align-items: center; }
	.workshop__body { grid-column: content-start / col-end 5; padding-block: 0; }
	.workshop__media { grid-column: col-start 7 / content-end; align-self: stretch; min-height: clamp(28rem, 42vw, 44rem); }
	.workshop__grid:not(:has(.workshop__media)) .workshop__body { grid-column: content-start / col-end 8; }

	/* Signature */
	.sig { padding-block: var(--chapter); align-items: center; }
	.sig__photo { grid-column: content-start / col-end 5; min-height: clamp(30rem, 44vw, 48rem); }
	.sig__copy { grid-column: col-start 7 / content-end; padding-block: 0; }

	/* Why */
	.choose__intro { grid-column: 1 / span 5; }
	.choose__list { grid-column: 7 / -1; }

	/* Spotlight */
	.spot { padding: var(--chapter) 0; align-items: center; }
	.spot__head { grid-column: content-start / col-end 5; }
	.spot__strip { grid-column: col-start 7 / bleed-end; }

	/* Call and footer */
	.call__title { grid-column: 1 / span 6; }
	.call__body, .call .btn { grid-column: 7 / -1; }
	.site-foot .brand { grid-column: 1 / span 6; }
	.site-foot__nav { grid-column: 7 / span 4; }

	/* Interior */
	.philosophy__grid > :first-child { grid-column: 1 / span 5; }
	.philosophy__grid > :last-child { grid-column: 7 / -1; }
	.philosophy__grid--flip > :first-child { grid-column: 7 / -1; order: 2; }
	.philosophy__grid--flip > :last-child { grid-column: 1 / span 5; order: 1; }
	.why__grid > :first-child { grid-column: 1 / span 5; }
	.why__grid > :last-child { grid-column: 7 / -1; }
	.services__head > :first-child { grid-column: 1 / span 6; }
	.services__aside { grid-column: 7 / -1; max-width: 40ch; }
}

/* Swatches sit above their words, never beside them */
.choose__item { display: block; padding-block: var(--gap-item); }
.choose__item .chip { margin: 0 0 1.1rem; }
.choose__d { margin-top: 0.6rem; }
.pillars__item { padding-top: calc(var(--swatch-h) + 1.1rem); }

/* ---------- Phone and tablet: one edge ---------- */
@media (max-width: 900px) {
	.open__grid { padding: 0 var(--edge) var(--chapter); }
	.open__kicker { order: 1; margin: 0 0 var(--gap-kicker); padding: clamp(1.75rem, 7vw, 3rem) 0 0; }
	.open__title {
		order: 2;
		margin: 0;
		padding: 0;
		font-size: clamp(2.35rem, 12.4vw, 4.25rem);
		line-height: 0.95;
	}
	.open__title .ln,
	.open__title .ln:nth-child(2) { padding-left: 0; }
	.open__figure {
		order: 3;
		margin-top: var(--gap-title);
		padding: 0;
		border-radius: var(--r-lg);
		overflow: hidden;
		isolation: isolate;
	}
	.open__photo { aspect-ratio: 4 / 5; max-height: 76svh; border-radius: 0; }
	.open__caption { gap: 0.35rem; padding: 1rem var(--pad-panel) var(--pad-panel); }
	.open__lede { order: 4; max-width: 34ch; margin: var(--gap-title) 0 0; padding: 0; }
	.open__actions { order: 5; margin-top: var(--gap-action); padding: 0; gap: 1.1rem 1.75rem; }
	.ledger {
		order: 6;
		margin-top: var(--gap-block);
		padding: var(--gap-item) 0 0;
		border-top: 1px solid var(--line);
		gap: var(--gap-item) var(--gut);
	}

	.inside__word { grid-template-columns: minmax(0, 1fr); }
	.inside__n { margin-bottom: 0.35rem; }
	.inside__note { grid-column: 1; }

	.framework { display: flex; flex-direction: column; gap: var(--gap-block); padding: var(--chapter) var(--edge); }
	.framework__media { aspect-ratio: 4 / 5; max-height: 78svh; }
	.framework__body { padding: 0; }
	.pillars { gap: var(--gap-item); margin-block: var(--gap-block); }
	.pillars__item { padding: calc(var(--swatch-h) + 1rem) 0 0; }
	.pillars__item::before,
	.pillars__item:hover::before { top: 0; width: var(--swatch-w); height: var(--swatch-h); }

	.work__list { padding-inline: var(--edge); scroll-padding-inline: var(--edge); }
	.work__list::after { flex: 0 0 calc(var(--edge) - var(--gut)); }
	.work__link { border-radius: var(--r-md); overflow: hidden; isolation: isolate; }
	.work__name { padding: var(--pad-panel) var(--pad-panel) 0.4rem; }
	.work__lede { padding: 0 var(--pad-panel) var(--pad-panel); }

	.workshop__grid { display: flex; flex-direction: column; gap: var(--gap-block); padding: var(--chapter) var(--edge); }
	.workshop__media { aspect-ratio: 4 / 5; max-height: 78svh; }
	.workshop__body { padding: 0; }

	.sig { padding: var(--chapter) var(--edge); }
	.sig__copy > * { padding-inline: 0; }
	.sig__title { margin-bottom: var(--gap-title); }
	.sig__photo { margin: 0; max-height: 78svh; }
	.sig__body { margin: var(--gap-title) 0 var(--gap-action); }
	.sig__quote { margin: var(--gap-block) 0 0; padding: 0; }

	.spot__strip { --h: min(24rem, 62svh); }
	.spot__strip::after { flex: 0 0 calc(var(--edge) - var(--gut)); }
}

@media (max-width: 600px) {
	.steps, .steps--3, .steps--six, .stats, .stats--3 { grid-template-columns: minmax(0, 1fr); }

	.tiles, .svc-row {
		display: flex;
		gap: var(--gut);
		margin-inline: calc(-1 * var(--edge));
		padding-inline: var(--edge);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--edge);
		scrollbar-width: none;
	}
	.tiles > *, .svc-row > * { flex: 0 0 78%; scroll-snap-align: start; }
	.tiles::after, .svc-row::after { content: ""; flex: 0 0 calc(var(--edge) - var(--gut)); }
	.tiles:has(> .tile--quote):not(:has(figure)) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
	.tiles:has(> .tile--quote):not(:has(figure))::after { content: none; }

}

/* ---------- Motion that keeps its corners ---------- */
html.motion .drape { clip-path: inset(0 0 100% 0 round var(--drape-r, var(--r-lg))); }
html.motion .drape.is-in { clip-path: inset(0 round var(--drape-r, var(--r-lg))); }

/* ---------- Pass 2 corrections ---------- */
.label, .eyebrow { max-width: 64ch; }
.arrow-link { width: fit-content; align-self: flex-start; }

/* The workshop line is a label on the photograph, not a notch cut into it */
.workshop__card {
	left: var(--pad-photo);
	bottom: var(--pad-photo);
	max-width: min(18ch, calc(100% - 2 * var(--pad-photo)));
	padding: 0.85rem 1.1rem 0.95rem;
	border-radius: var(--r-md);
}

@media (max-width: 900px) {
	/* Colour lives on the caption plate only, so no rani hairline shows
	   round the photograph's anti-aliased corners */
	.open__figure { background: none; }
	.open__caption { background: var(--rani); }
	.open__photo { --drape-r: 0px; }
	.inside__word + .inside__word { margin-top: 0.5rem; }
}

/* ---------- Pass 3 ---------- */

/* Tablet hero: headline across, portrait and words side by side */
@media (min-width: 601px) and (max-width: 900px) {
	.open__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto auto auto 1fr auto;
		grid-template-areas:
			"kick   kick"
			"title  title"
			"fig    lede"
			"fig    actions"
			"fig    ."
			"ledger ledger";
		column-gap: var(--gut);
	}
	.open__kicker { grid-area: kick; }
	.open__title { grid-area: title; }
	.open__figure { grid-area: fig; }
	.open__lede { grid-area: lede; align-self: start; }
	.open__actions { grid-area: actions; flex-direction: column; align-items: flex-start; }
	.ledger { grid-area: ledger; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.framework__media, .workshop__media, .sig__photo { max-height: 64svh; }
}

/* Footer base on the grid, not spaced by leftovers */
@media (min-width: 901px) {
	.site-foot__base { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
	.site-foot__base > p:first-child { grid-column: 1 / span 6; }
	.site-foot__legal { grid-column: 7 / span 4; flex-direction: column; gap: 0.35rem; }
	.site-foot__base > p:last-child { grid-column: 11 / -1; text-align: right; }

	.philosophy__grid > .iconic__media { position: sticky; top: calc(var(--head) + var(--gap-item)); }
}
@media (max-width: 900px) {
	.site-foot__base { flex-direction: column; gap: 0.6rem; }
	.site-foot__legal { flex-direction: column; gap: 0.35rem; }
}

.field select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231a1311' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 0.75rem;
}

/* Cursor only where it belongs */
.cursor { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	html.cursor-on .cursor { display: block; }
}

/* === The client's logo === */
.brand__logo { display: block; width: auto; height: clamp(2.7rem, 3.4vw, 3.5rem); }
.site-foot .brand__logo { height: clamp(3.75rem, 6vw, 5.5rem); }

/* === Soft skills course band === */
.course { padding-block: var(--chapter); background: var(--blush); color: var(--ink); --btn-fill: var(--rani); }
.course__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--gap-block); align-items: start; }
.course__copy { grid-column: 1 / span 5; }
.course__body { max-width: 40ch; margin-block: var(--gap-title) var(--gap-action); color: var(--ink-2); }
.course__modules { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
.course__modules li { display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; padding-block: 0.95rem; border-top: 1px solid rgba(26, 19, 17, 0.14); font-family: var(--serif); font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.25; text-wrap: balance; }
.course__n { font-family: var(--sans); font-size: var(--t-label); font-weight: 600; color: var(--rani); }
@media (max-width: 900px) {
	.course__copy, .course__modules { grid-column: 1 / -1; }
	.course__modules { grid-template-columns: minmax(0, 1fr); }
}

/* === Workshop facts: never collide with the photograph === */
main > .section--cream2:first-child .stats,
.workshop .stats {
	margin-top: var(--gap-block);
	padding-top: var(--gap-item);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
main > .section--cream2:first-child .stats__n,
.workshop .stats__n { font-size: var(--t-3); line-height: 1.1; }

/* Workshop portraits are shown upright so the photograph is not cut mid-body.
   Unscoped from any width: a landscape box under a portrait photo crops the
   same amount of her regardless of how wide the screen happens to be. */
.workshop--cream .workshop__media { aspect-ratio: 4 / 5; min-height: 0; align-self: start; }
main > .section--cream2:first-child .iconic__media { height: auto !important; aspect-ratio: 4 / 5; }

/* About: the remarks she heard, introduced so they read as quotations */
.about-quotes { margin-top: var(--gap-block); }
.about-quotes .tile--quote { font-style: italic; }
main > .section--cream2:first-child .iconic__media { position: relative; }
main > .section--cream2:first-child .iconic__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hero headline: capped so its three lines never re-wrap on wide screens,
   where the copy column stops growing at the page's maximum width. */
@media (min-width: 901px) {
	.open__title { font-size: clamp(2.6rem, 6.8vw, 6.25rem); }
}

/* Photographs beside text are shown upright, filling a soft 4:5 frame at
   every width, so a portrait is never reduced to a letterbox that cuts
   through her head, hands or feet. */
.iconic__media--photo { height: auto !important; aspect-ratio: 4 / 5; }
.iconic__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* === Round 2 client feedback (2026-09-28) === */

/* A text link that opens something ("Explore my services", "My approach")
   now reads as a button, not a plain underlined phrase easy to miss. */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem;
	border: 1.5px solid currentColor;
	border-radius: var(--r-pill, 999px);
	font-weight: 600;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.arrow-link::after { content: none; }
.arrow-link::before {
	content: "→";
	order: 2;
	transition: transform 0.3s var(--ease);
}
.arrow-link:hover::before { transform: translateX(3px); }

.arrow-link:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.arrow-link--light:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* The header is a fixture on every page, not a thin strip that only gets a
   shadow once you scroll — a small permanent line under it, and the current
   page named in the one accent colour, both said plainly rather than left
   to a hover state. */
.masthead { border-bottom: 1px solid var(--line); }
.nav .current-menu-item > a,
.nav a[aria-current="page"] { color: var(--rani); font-weight: 600; }

/* Colour swatches read as small blocks on a phone; a touch larger keeps them
   legible as marks rather than dust. */
.chip, .choose__item .chip,
.philosophy__rule,
.pillars__item::before,
.reasons__item::before {
	--swatch-w: 3.25rem;
}

/* =============================================================
   ROUND 3 — client feedback, 28 September
   ============================================================= */

/* ---------- 1. A photograph is never cut ----------
   A feature photograph is shown whole, at its own shape. The frame takes its
   height from the picture instead of cropping the picture to a frame, so a
   head, a hand or a heel can never fall outside it — at any screen width. */
.open__photo,
.framework__media,
.workshop__media,
.sig__photo,
.iconic__media,
.iconic__media--photo,
main > .section--cream2:first-child .iconic__media {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	flex: none;
	align-self: start;
}

.open__photo .iy-img,
.framework__media .iy-img,
.workshop__media .iy-img,
.sig__photo .iy-img,
.iconic__media .iy-img {
	position: static !important;
	inset: auto !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: fill;
}

/* A photograph beside text is never wider than a portrait needs to be. */
.iconic__media--photo { width: 100%; max-width: 34rem; }

@media (min-width: 901px) {
	/* Portrait photographs in the coloured bands take five columns, not six,
	   so a whole figure stays in proportion with the words beside it. */
	.workshop__media { grid-column: col-start 8 / content-end; }
	.framework,
	.sig { align-items: center; }
}

@media (min-width: 601px) and (max-width: 900px) {
	.framework__media,
	.workshop__media,
	.sig__photo,
	.iconic__media--photo { max-width: 30rem; }
}

/* Small pictures in a row share one upright frame, the shape most of her
   photographs are taken in (2:3), so a full-length picture keeps its feet. */
.work__img,
.svc__img { aspect-ratio: 2 / 3 !important; }

/* Editorial: every tile is the same size, and every picture is shown whole,
   mounted on a quiet mat like a print, instead of being trimmed to fit. */
.tile:not(.tile--quote):not(.tile--card) {
	aspect-ratio: 4 / 5;
	padding: clamp(0.55rem, 1.1vw, 0.9rem);
	background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.tile:not(.tile--quote):not(.tile--card) img { object-fit: contain; }
.tile:hover img { transform: none; }
.tiles:has(figure) .tile--quote,
.tiles:has(figure) .tile--card { aspect-ratio: 4 / 5; min-height: 0; }

/* ---------- 2. The home opening on a phone ----------
   The same pink mat as on a desktop, with the photograph inside it and the
   caption beneath, instead of colour reduced to a strip under the picture. */
@media (max-width: 900px) {
	.open__figure {
		padding: var(--pad-panel) var(--pad-panel) 0;
		background: var(--rani);
		color: var(--on-dark);
		border-radius: var(--r-lg);
		overflow: hidden;
	}
	.open__photo { border-radius: var(--r-md); }
	.open__caption { padding: 1rem 0 var(--pad-panel); background: none; }
}

/* ---------- 3. Type that is easy to read ----------
   Two families only — Bodoni Moda for headings, Archivo for everything else —
   with enough weight that the fine strokes survive at every size. */
h1, h2,
.section-title,
.call__title,
.open__title,
.work__name { font-weight: 500; }

h3, h4,
.pillars__t,
.steps__t,
.choose__t,
.tier__name,
.svc__t,
.course__modules li,
.tile--card b,
.spot__words,
.open__note { font-weight: 600; }

.label,
.eyebrow {
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: color-mix(in srgb, currentColor 82%, transparent);
}

/* Running text a shade darker everywhere it had been washed back. */
.pillars__d, .steps__d, .work__lede, .tile-cap, .tier__for,
.framework__lede, .philosophy__body, .why__copy, .sig__body, .workshop__copy,
.course__body, .choose__lede, .choose__d, .spot__body, .work__aside p,
.open__lede, .inside__body, .services__aside {
	color: color-mix(in srgb, currentColor 88%, transparent);
}

/* Figures and what they count: the number carries weight, the words beneath
   it are smaller and plainer, so the two read as a pair and not a paragraph. */
.stats__n { font-weight: 600; }
.stats__l {
	display: block;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
	color: color-mix(in srgb, currentColor 86%, transparent);
}
body:not(.single-sj_workshop) main > .section--cream2:first-child .stats__n { color: var(--rani); }

.ledger li { list-style: none; }
.ledger__mark { display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 0.85rem; color: var(--rani); }
.ledger__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ledger__n { font-weight: 600; }
.ledger__l { font-size: 0.9rem; font-weight: 500; color: color-mix(in srgb, var(--ink) 82%, transparent); }

/* ---------- 4. A header that stands out ----------
   A white bar against the paper page, a fine rule beneath it, and the page
   you are on named in the accent colour. */
.masthead { background: #fff; border-bottom: 1px solid var(--line); }
.masthead.is-stuck { box-shadow: 0 12px 28px -22px rgba(26, 19, 17, 0.45); }
.nav a { font-size: 0.98rem; font-weight: 500; color: var(--ink); transition: color 0.25s var(--ease); }
.nav a:hover { color: var(--rani); }
.nav .current-menu-item > a,
.nav a[aria-current="page"] { color: var(--rani); font-weight: 600; }
@media (max-width: 1100px) {
	.masthead__nav .nav a,
	.masthead__nav .nav .current-menu-item > a { color: var(--on-dark); font-weight: 400; }
}

/* ---------- 5. Links that are clearly buttons ---------- */
.arrow-link { line-height: 1.2; white-space: nowrap; }
.contact-link {
	display: inline-block;
	padding-bottom: 0.2rem;
	border-bottom: 1.5px solid currentColor;
	font-weight: 500;
	overflow-wrap: anywhere;
	transition: color 0.25s var(--ease);
}
.contact-link:hover { color: var(--rani); }

/* ---------- 6. It always starts within: four steps, two by two ---------- */
ol.steps { list-style: none; margin: 0; padding: 0; }
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--gap-block); }
.steps--2 .steps__t { font-size: var(--t-2); line-height: 1; margin-bottom: 0.6rem; }
@media (max-width: 600px) { .steps--2 { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-item); } }

/* ---------- 7. The framework photograph, set like a magazine cover ---------- */
.framework__media--cover { position: relative; }
.framework__media--cover::before {
	content: "";
	position: absolute;
	inset: clamp(0.6rem, 1.2vw, 1rem);
	z-index: 2;
	border: 1px solid color-mix(in srgb, var(--on-dark) 45%, transparent);
	border-radius: calc(var(--r-lg) - clamp(0.6rem, 1.2vw, 1rem));
	pointer-events: none;
}
.framework__media--cover::after {
	background:
		linear-gradient(to bottom, rgba(26, 19, 17, 0.6) 0%, rgba(26, 19, 17, 0) 24%),
		linear-gradient(to top, rgba(26, 19, 17, 0.88) 0%, rgba(26, 19, 17, 0.38) 32%, rgba(26, 19, 17, 0) 58%);
}
.framework__media .framework__masthead {
	position: absolute !important;
	z-index: 3;
	top: clamp(1.5rem, 3.2vw, 2.6rem);
	left: 0;
	right: 0;
	width: min(56%, 16rem) !important;
	height: auto !important;
	margin-inline: auto;
	object-fit: contain;
	pointer-events: none;
}
.framework__media--cover .framework__over { z-index: 3; }

/* =============================================================
   ROUND 4 — fixes from the visual review of round 3
   ============================================================= */

/* ---------- Photographs ---------- */

/* A contained picture sits in the middle of its mat. The focal point is a face
   position for cropping; under `contain` it would only push the picture to an
   edge. */
.tile:not(.tile--quote):not(.tile--card) img,
.spot__item img { object-position: 50% 50% !important; }

/* Editorial grids: equal square tiles, as many columns as divide the set. */
.tiles.tiles--ed { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); row-gap: var(--gap-item); }
.tiles--ed .tile,
.tiles--ed .tile--quote,
.tiles--ed .tile--card { aspect-ratio: 1 / 1; min-height: 0; }
@media (min-width: 601px) and (max-width: 900px) {
	.tiles.tiles--ed { grid-template-columns: repeat(var(--cols-tab, 2), minmax(0, 1fr)); }
}
.tiles { row-gap: var(--gap-item); }

/* The mat reads as a mat on either ground. */
.section--cream2 .tile:not(.tile--quote):not(.tile--card) { background: var(--paper); }

/* The podium photograph is wider than the card frame; trim the projector
   screen on the left, not the event banner on the right. */
.work__img img[src*="session-speaking-podium"],
.svc__img img[src*="session-speaking-podium"] { object-position: 66% 42% !important; }

/* Home press strip: only a newspaper clipping is black and white. */
.spot__item img { filter: none; mix-blend-mode: normal; }
.spot__item--clip img { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }

/* On a desktop the press strip is a tidy row inside the page, not a strip
   running off the edge with its last picture sliced by the window. */
@media (min-width: 901px) {
	.spot { row-gap: var(--gap-block); align-items: start; }
	.spot__head { grid-column: content-start / content-end; }
	.spot__strip {
		grid-column: content-start / content-end;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gut);
		overflow: visible;
		cursor: auto;
		scroll-snap-type: none;
	}
	.spot__strip::after { content: none; }
	.spot__strip > * { width: auto !important; }
	.spot__quote,
	.spot__card { height: auto; aspect-ratio: 4 / 5; padding: var(--pad-panel); }
	.spot__quote p,
	.spot__words { font-size: clamp(1.25rem, 1.7vw, 1.85rem); }
	.spot__mat { padding: clamp(0.5rem, 0.9vw, 0.8rem); }
}

/* A dark scrim belongs only under words set on a photograph. */
.framework__media:not(:has(.framework__over))::after { content: none; }
.slug-editorial .framework__over,
.slug-editorial .framework__media::after { display: none; }

/* A sticky photograph turned relative kept its sticky offset and slid down
   over the facts row beneath it. */
main > .section--cream2:first-child .iconic__media { top: auto; }

/* ---------- Home: It always starts within ---------- */
.within__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gut);
	row-gap: var(--gap-block);
	align-items: start;
}
.within__copy { grid-column: 1 / span 7; }
.within__body { margin-block: var(--gap-title) var(--gap-action); }
ol.steps.within__steps { margin-top: var(--gap-block); }
.within__action { margin-top: var(--gap-block); }
.within__steps .steps__t { font-size: clamp(1.9rem, 3vw, 3.1rem); }
.within__photo { grid-column: 9 / -1; max-width: none; position: sticky; top: calc(var(--head) + var(--gap-item)); }
@media (max-width: 900px) {
	.within__copy,
	.within__photo { grid-column: 1 / -1; }
	.within__photo { position: static; max-width: 26rem; }
}

/* ---------- Alignment and spacing ---------- */
.section-title + .philosophy__body { margin-top: var(--gap-title); }
.hero__lede + .hero__actions { margin-top: var(--gap-action); }

@media (max-width: 900px) {
	/* One left edge: the text blocks start where the photographs do. */
	.workshop__body { align-self: stretch; }
	.work__link { align-items: stretch; }

	/* A rule at the end of a stacked column does not add to the row gap. */
	.philosophy__grid > div > .philosophy__rule:last-child { margin-bottom: 0; }
	.philosophy__grid:not(:has(> .iconic__media)) { row-gap: var(--s-4); }
}

/* Workshop band on the hub: space below the facts, not a pile above them. */
.workshop:has(> .wrap .stats) > .workshop__grid { padding-bottom: 0; }
.workshop > .wrap:has(> .stats) { padding-bottom: var(--chapter); }

@media (min-width: 901px) {
	/* Text and photograph in the coloured bands meet across one gutter
	   column, not an empty third of the band. */
	.workshop__body { grid-column: content-start / col-end 6; }
	.workshop__copy { max-width: 46ch; }

	/* Mirrored service rows put the photograph on the right-hand grid line,
	   at the same size as the left-hand ones. */
	.philosophy__grid--flip > .iconic__media:first-child { grid-column: 8 / -1; }
	.philosophy__grid--flip:has(> .iconic__media:first-child) > :last-child { grid-column: 1 / span 6; }

	/* The closing call keeps a clear column between headline and copy. */
	.call__title { grid-column: 1 / span 5; font-size: clamp(2.25rem, 4.2vw, 3.8rem); }

	/* Contact's four next steps read across as one sequence. */
	.reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* Full-width lists end in full rows. */
	.wrap > .covers:has(> li:nth-child(3n):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wrap > .covers:has(> li:nth-child(10):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 601px) and (max-width: 900px) {
	.open__grid { column-gap: 2rem; }
	.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.work__item,
	.work__item:last-child { flex: 0 0 min(44%, 21rem); }
	.about-quotes .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* On a tablet a photograph and its words sit side by side, as on a
	   desktop, instead of a narrow picture hanging off the left. Every split
	   uses the same five-to-seven ratio, the photograph on the side it takes
	   on a desktop, so the text edges repeat from one section to the next. */
	.framework:has(> .framework__media),
	.sig,
	.philosophy__grid:has(> .iconic__media--photo),
	.why__grid:has(> .iconic__media--photo) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 2rem;
		align-items: start;
	}
	.workshop__grid:has(> .workshop__media),
	.within__grid {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 2rem;
		align-items: start;
	}
	.framework__media,
	.workshop__media,
	.sig__photo,
	.philosophy__grid:has(> .iconic__media--photo) > .iconic__media--photo,
	.why__grid:has(> .iconic__media--photo) > .iconic__media--photo { max-width: none; }
	.philosophy__grid:has(> .iconic__media--photo) > *,
	.why__grid:has(> .iconic__media--photo) > * { grid-column: auto !important; }

	/* A photograph beside a long column stays in view while the words run on. */
	.philosophy__grid:has(> .iconic__media--photo) > .iconic__media--photo,
	.why__grid:has(> .iconic__media--photo) > .iconic__media--photo,
	.within__photo {
		position: sticky;
		top: calc(var(--head) + var(--gap-item));
	}

	/* The signature band: photograph left, the words beside it. */
	.sig { padding: var(--chapter) var(--edge); }
	.sig__photo { grid-column: 1; grid-row: 1; margin: 0; order: 0; }
	.sig__copy { display: block; grid-column: 2; grid-row: 1; padding-block: 0; }
	.sig__copy > * { order: 0; }
	.sig__quote { margin-top: var(--gap-action); padding-block: 0; }

	/* Home, It always starts within: the portrait beside the steps. */
	.within__copy { grid-column: 1; }
	.within__photo { grid-column: 2; grid-row: 1; max-width: none; }
}

@media (min-width: 601px) {
	.slug-about .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	/* The other services, as a grid of four on a phone — not a scroller whose
	   next card is sliced at the edge of the screen. */
	.svc-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-item) var(--gut);
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.svc-row::after { content: none; }
	.svc-row > * { flex: none; }
}

/* About: the pink line comes before the words that answer it. */
@media (max-width: 900px) {
	.slug-about .philosophy__grid:has(> .iconic__quote) { row-gap: 0; }
	.slug-about .philosophy__grid:has(> .iconic__quote) > div:first-child { display: contents; }
	.slug-about .philosophy__grid:has(> .iconic__quote) > div:first-child > * { grid-column: 1 / -1; order: 1; }
	.slug-about .philosophy__grid:has(> .iconic__quote) > div:first-child > .philosophy__body { order: 3; }
	.slug-about .philosophy__grid:has(> .iconic__quote) > .iconic__quote { grid-column: 1 / -1; order: 2; margin-bottom: var(--gap-title); }
}
.about-quotes .tile--quote { justify-content: flex-start; gap: 0.75rem; min-height: 0; }

/* Contact form: the reason picker gets a whole row, so its choice is never
   clipped mid-word. */
.form__grid > .field:first-child,
.form__grid > .field:has(select) { grid-column: 1 / -1; }
.field select { text-overflow: ellipsis; white-space: nowrap; }

/* ICONIC YOU: the "Most chosen" badge sits on the swatch line, so all three
   tier names start at the same height. */
.tier { position: relative; }
.tier--featured > .eyebrow--dark {
	position: absolute;
	top: calc(var(--pad-panel) - 0.45rem);
	right: var(--pad-panel);
	margin: 0;
}

/* ---------- Legibility ---------- */
.fig-plus { font-family: var(--sans); font-weight: 700; font-size: 0.5em; vertical-align: 0.75em; margin-left: 0.06em; }
.choose__t .hy { font-family: var(--sans); font-weight: 500; }

.sig__quote { color: var(--blush); font-weight: 500; }
.framework__media--cover .framework__list { color: var(--on-dark); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em; }

/* The "not about" list on a dark band: statements, one to a line. */
.framework__body > .framework__list {
	display: grid;
	gap: 0;
	font-size: var(--t-small);
	font-weight: 500;
	color: var(--on-dark);
}
.framework__body > .framework__list li {
	position: relative;
	padding: 0.7rem 0 0.7rem 1.4rem;
	border-left: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
}
.framework__body > .framework__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--rani);
}

/* Words on pink at full strength. */
.workshop :is(.workshop__copy, .eyebrow, .label, .stats__l, .tile-cap),
.single-sj_workshop main > .section--cream2:first-child :is(.hero__lede, .eyebrow, .label, .stats__l, .tile-cap) { color: var(--on-dark); }

/* The line that used to sit on the workshop photograph, now under the facts. */
.workshop__tag {
	margin: 0 0 var(--gap-action);
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: var(--t-3);
	line-height: 1.15;
}

.rte h3,
.rte h4 { line-height: 1.2; text-wrap: balance; }
.rte ul { list-style: none; padding-left: 0; }
.rte ul li { position: relative; padding-left: 1.2rem; }
.rte ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--rani);
}

/* Buttons: one weight, one height, filled or outlined. */
.btn { font-weight: 600; line-height: 1; }
.arrow-link { padding-block: calc(1.05rem - 1.5px); font-size: 0.9rem; line-height: 1; }

/* One near-black: the footer matches the dark bands. */
.site-foot { background: var(--ink); }

/* =============================================================
   ROUND 5 — fixes from the re-check of round 4
   ============================================================= */

/* ---------- Tablet: one grid ---------- */
@media (min-width: 601px) and (max-width: 900px) {
	/* The coloured bands centre the words on the photograph, as on a desktop. */
	.framework:has(> .framework__media),
	.sig,
	.workshop__grid:has(> .workshop__media) { align-items: center; }
	.framework__media,
	.sig__photo,
	.workshop__media { align-self: center; }

	/* The workshop band keeps its desktop order: words, then the photograph. */
	.workshop__media { order: 0; }

	/* Every second column starts on the same line as the half-width splits. */
	.ledger,
	.steps,
	.reasons,
	.form__grid,
	.covers { column-gap: 2rem; }
	.site-foot__nav ul { column-gap: 2rem; }
}

/* ---------- Home: the services, as an index on phones and tablets ----------
   The desktop list, with each service's picture beside its name — not a
   sideways scroller whose next card is sliced by the edge of the screen. */
@media (max-width: 900px) {
	.work__list {
		display: grid;
		gap: 0;
		margin: var(--gap-block) var(--edge) 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.work__list::after { content: none; }
	.work__item,
	.work__item:last-child {
		flex: none;
		border: 0;
		border-top: 1px solid var(--line);
		scroll-snap-align: none;
	}
	.work__item:last-child { border-bottom: 1px solid var(--line); }
	.work__link {
		display: grid;
		grid-template-columns: clamp(6.5rem, 26vw, 10rem) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--gut);
		row-gap: 0.6rem;
		align-items: start;
		height: auto;
		padding: var(--s-3) 0;
		background: none;
		color: var(--ink);
		border-radius: 0;
		overflow: visible;
	}
	.work__item:hover .work__link,
	.work__item:focus-within .work__link { color: var(--ink); }
	.work__img {
		grid-column: 1;
		grid-row: 1 / span 2;
		border-radius: var(--r-md);
		overflow: hidden;
	}
	.work__name {
		grid-column: 2;
		padding: 0;
		font-size: clamp(1.4rem, 4.4vw, 2rem);
		line-height: 1.08;
		text-wrap: balance;
	}
	.work__lede {
		grid-column: 2;
		padding: 0;
		font-size: 0.92rem;
		line-height: 1.5;
	}
}

/* ---------- Home: the press strip on phones and tablets ----------
   Equal tiles in a grid, each picture whole on its mat, instead of a scroller
   of unequal widths cut at the screen edge. */
@media (max-width: 900px) {
	.spot__strip {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-item) var(--gut);
		margin-inline: var(--edge);
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
		cursor: auto;
	}
	.spot__strip::after { content: none; }
	.spot__strip > * { width: auto !important; height: auto; }
	.spot__quote { grid-column: 1 / -1; }
	.spot__mat { padding: 0.5rem; }
	.spot__card {
		align-self: start;
		aspect-ratio: 4 / 5;
		padding: var(--s-3);
		justify-content: space-between;
	}
	.spot__card .spot__words { font-size: clamp(1.15rem, 4.2vw, 1.6rem); }
	.spot__card > span { font-size: 0.8rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.spot__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.spot__quote { grid-column: span 2; }
}

/* Desktop: the blush card keeps the same 4:5 shape as the mats beside it. */
@media (min-width: 901px) {
	.spot__quote,
	.spot__card { min-height: 0; }
	.spot__card { padding: var(--s-3) var(--pad-panel); justify-content: space-between; }
}

/* A clipping sits on the same paper mat as the photographs, in crisp grey. */
.spot__item--clip img { filter: grayscale(1) contrast(1.15); mix-blend-mode: normal; }

/* ---------- Editorial ---------- */

/* The picture on each mat has its own soft corners: the image is sized to
   the photograph, centred on the mat, instead of a mat-sized box with the
   picture letterboxed inside it. */
.tile:not(.tile--quote):not(.tile--card) {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
}
.tile:not(.tile--quote):not(.tile--card) img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: fill;
	border-radius: calc(var(--r-md) * 0.55);
}

/* The dark photograph on the ink band keeps a visible edge. */
.slug-editorial .framework__media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-dark) 18%, transparent); }

/* On a phone the grids stack instead of scrolling sideways: one picture to
   a row, each whole at its own shape and the full width of the column. */
@media (max-width: 600px) {
	.tiles.tiles--ed {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-item) var(--gut);
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.tiles.tiles--ed::after { content: none; }
	.tiles.tiles--ed > * { flex: none; }
	.tiles.tiles--ed .tile:not(.tile--quote):not(.tile--card) {
		aspect-ratio: auto;
		padding: 0;
		background: none;
	}
	.tiles.tiles--ed .tile:not(.tile--quote):not(.tile--card) img {
		width: 100%;
		border-radius: var(--r-md);
	}
	.tiles.tiles--ed .tile--quote,
	.tiles.tiles--ed .tile--card { aspect-ratio: auto; min-height: 0; }
}

/* ---------- Contact ---------- */
.reasons__item p { font-weight: 600; text-wrap: balance; }

@media (max-width: 900px) {
	/* The enquiry form starts a new part of the page, not one more line of
	   the contact details above it. */
	.slug-contact .philosophy__grid { row-gap: 0; }
	.slug-contact .philosophy__grid > div + div {
		margin-top: var(--gap-block);
		padding-top: var(--gap-block);
		border-top: 1px solid var(--line);
	}
}

/* ---------- Services ---------- */
.svc__t { display: block; }
@media (max-width: 600px) {
	.svc__t { font-size: 1.1rem; line-height: 1.15; }
}

.text-link-row { margin: var(--gap-title) 0 0; }
.text-link {
	color: var(--rani);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}
.text-link:hover,
.text-link:focus-visible { color: var(--ink); }

/* ---------- ICONIC YOU ---------- */
/* The three tiers share their rows, so every divider and every list starts
   on one line however long each description runs. */
@media (min-width: 901px) {
	.tiers { grid-template-rows: auto auto auto auto 1fr auto; }
	.tier {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
	.tier__foot { align-self: end; }
}

/* ---------- Workshops ---------- */
.services__aside p + p { margin-top: 1em; }

/* The "not about" statements run to the width of the line that closes them. */
.framework__body > .framework__list {
	align-self: stretch;
	width: 100%;
	max-width: 34rem;
}

/* =============================================================
   ROUND 6 — fixes from the second re-check
   ============================================================= */

/* Home press strip: the mat is its own box, so the picture keeps soft
   corners and the black-and-white filter never touches the mat. */
.spot__mat {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	aspect-ratio: 4 / 5;
	background: var(--paper);
	border-radius: var(--r-md);
}
.spot__item .spot__mat img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	padding: 0;
	background: none;
	object-fit: fill;
	border-radius: calc(var(--r-md) * 0.55);
}

/* A band closes on its own padding, not on the last item's as well. */
.choose__item:last-child { padding-bottom: 0; }

@media (max-width: 900px) {
	/* A button is followed by the same space everywhere: the block gap. */
	.spot { row-gap: var(--gap-block); }
	.choose__intro { margin-bottom: calc(var(--gap-block) - var(--gap-item)); }

	/* Each card's title belongs to the photograph above it, not the one below. */
	.svc-row { row-gap: var(--gap-block); }
}

@media (min-width: 601px) and (max-width: 900px) {
	/* On a narrow photograph the badge would sit on her head; the line it
	   carries is already in the words beside it. */
	.workshop__script { display: none; }

	/* The cover lines as a tidy two-by-two on a narrow cover. */
	.framework__media--cover .framework__list {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		gap: 0.3rem 1.25rem;
	}

	/* A workshop header keeps its photograph on the narrow side, as every
	   other split on a tablet does. */
	.philosophy__grid--flip > .iconic__media--photo:last-child { order: -1; }
}

@media (min-width: 901px) {
	/* Home, It always starts within: each step spans three of the seven
	   copy columns, so the second one starts on the page's fourth column. */
	.within__steps.steps--2 {
		grid-template-columns: repeat(2, calc((100% - 6 * var(--gut)) * 3 / 7 + 2 * var(--gut)));
		column-gap: var(--gut);
	}

	/* A short service page centres its words against the photograph. */
	.single-sj_service .philosophy__grid:has(> .iconic__media--photo) { align-items: center; }
	.single-sj_service .philosophy__grid > .iconic__media--photo { align-self: start; }

	/* A heading beside a long list stays in view while the list runs on. */
	.philosophy__grid:has(> .rte) > :first-child {
		position: sticky;
		top: calc(var(--head) + var(--gap-item));
		align-self: start;
	}
}

/* ---------- Payments ---------- */
.pay-result { display: grid; gap: var(--s-2); }
.pay-result .section-title { margin: 0; }
.pay-result .philosophy__body { margin: 0; max-width: 46ch; }
.pay-result--failed { margin-bottom: var(--gap-action); padding: var(--pad-panel); border-radius: var(--r-md); background: var(--paper); }
.pay-result--failed .eyebrow { color: var(--rani); }
.form__trust { margin-top: 0.9rem; font-size: 0.82rem; color: color-mix(in srgb, currentColor 70%, transparent); }