/* ---------------------------------------------------------------------------
   A project page still being written (case-studies/<slug>/page.php,
   inc/private-pages.php; Corey, 2026-10-14)

   Laid out as the other project pages are, without the page builder: a
   hero in the company's colour with the title and a screen, the light
   sheet laid over its foot with rounded top corners, the overview beside a
   spec table (TL;DR, Timeline, Company, Role, Tools), then the story in
   sections of copy and screens, and the working prototype to try. Playfair
   for titles, Lato for the rest, as everywhere on the site. Copy still to
   be written is marked .cs-tk.
   --------------------------------------------------------------------------- */

.lp {
	--lp-brand: #00566f;
	--lp-brand-2: #0b7a8a;
	--lp-sheet: #f4f8f7;
	--lp-card: #ffffff;
	--lp-ink: #181818;
	--lp-ink-2: #4a514e;
	--lp-ink-3: #6f7472;
	--lp-rule: rgba( 24, 34, 28, .1 );
	--lp-chip: #e3eeeb;
	--lp-r: 25.6px;
	--lp-gutter: clamp( 20px, 3.3vw, 48px );
	background: var( --lp-sheet );
	color: var( --lp-ink );
	font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* The page's own ground in the hero's top colour, so the browser's
   status bar and the overscroll above the hero take it rather than black
   (inc/case-layouts.php, theme-color). */
html:has( body.cs-private ),
body.cs-private {
	background-color: #0b2a36 !important;
}

/* In the page's lower half, the footer's black instead (inc/case-layouts.php). */
html.cs-ground-foot:has( body.cs-private ),
html.cs-ground-foot body.cs-private {
	background-color: #000 !important;
}

html.after-hours .lp {
	--lp-sheet: #121618;
	--lp-card: #1b2023;
	--lp-ink: #eceeea;
	--lp-ink-2: #cfd5d2;
	--lp-ink-3: #98a19c;
	--lp-rule: rgba( 255, 255, 255, .1 );
	--lp-chip: #23302d;
}

/* The hero ---------------------------------------------------------------- */

.lp-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr );
	align-items: end;
	gap: clamp( 24px, 4vw, 64px );
	/* Shorter (Corey, 2026-10-17): less above the title, and the chat's
	   box below (120–170px and 400–520px at first). */
	padding: clamp( 96px, 9vw, 120px ) var( --lp-gutter ) calc( var( --lp-r ) + clamp( 40px, 5vw, 72px ) );
	/* More depth (Corey, 2026-10-17): a deep shade in the top left and the
	   foot, soft violet light low on the left and behind the chat, under the
	   teal glow it had. */
	background:
		radial-gradient( 45% 60% at 0% 0%, rgba( 2, 16, 26, .7 ), transparent 70% ),
		radial-gradient( 60% 55% at 50% 115%, rgba( 2, 14, 24, .55 ), transparent 70% ),
		radial-gradient( 38% 55% at 14% 88%, rgba( 128, 104, 214, .3 ), transparent 70% ),
		radial-gradient( 30% 45% at 68% 52%, rgba( 156, 128, 226, .18 ), transparent 70% ),
		radial-gradient( 70% 90% at 85% 10%, rgba( 120, 200, 210, .26 ), transparent 70% ),
		linear-gradient( 145deg, #062f3d 0%, var( --lp-brand ) 55%, var( --lp-brand-2 ) 100% );
	color: #fff;
	overflow: hidden;
}

.lp-hero__in {
	display: grid;
	gap: 12px;
	align-content: end;
	padding-bottom: 8px;
}

/* No theme hero here: its spacer goes, and its content wrapper is only a
   frame for the page, so the hero runs to the top under the header. */
body.cs-private .hero-spacer,
body.cs-private .hero-module {
	display: none;
}

body.cs-private #content-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* The site's header lies over the hero, as on the other project pages. */
body.cs-private #header,
body.cs-private:not( .header-stuck ) #header {
	background: transparent;
	box-shadow: none;
}

.lp-hero .lp-hero__in p {
	color: #fff;
}

.lp .lp-badge {
	justify-self: start;
	margin: 0 0 8px;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .12 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .22 );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lp .lp-hero__org {
	margin: 0;
	color: rgba( 255, 255, 255, .7 );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lp .lp-hero__title {
	margin: 0;
	color: #fff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp( 38px, 5vw, 68px );
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/* The conversation playing in a chat window (css/lp-chat.css). */
.lp-hero__art .lp-chat {
	--lp-chat-h: clamp( 320px, 27vw, 380px );
	--lp-chat-fs: 14.5px;
	/* Bigger, and a little slower (Corey, 2026-10-17): fitted no smaller
	   than 20px, the first messages passing out of the top where that is
	   more than the box holds; every wait and movement 1.1 times as long
	   (js/lp-chat.js). */
	--lp-chat-min: 20px;
	--lp-chat-pace: 1.1;
	max-width: 660px;
	margin-left: auto;
}

.lp-hero__art .lp-shot {
	margin: 0;
}

.lp-hero__art .lp-shot img,
.lp-hero__art .lp-shot__empty {
	border-radius: 14px;
	box-shadow:
		0 30px 60px -20px rgba( 0, 0, 0, .55 ),
		0 0 0 1px rgba( 255, 255, 255, .08 );
}

/* The chat's pause button (js/lp-chat.js): round, in glass, at the hero's
   foot on the right, under the chat. */
.lp-chat-pause {
	position: absolute;
	right: var( --lp-gutter );
	bottom: calc( var( --lp-r ) + 14px );
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .16 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .28 );
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.lp-chat-pause[hidden] {
	display: none;
}

.lp-chat-pause:hover {
	background: rgba( 255, 255, 255, .28 );
}

.lp-chat-pause:active {
	transform: scale( .94 );
}

.lp-chat-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.lp-chat-pause svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.lp-chat-pause.is-paused svg {
	transform: translateX( 1px );
}

/* The sheet --------------------------------------------------------------- */

.lp-sheet {
	position: relative;
	z-index: 1;
	margin-top: calc( -1 * var( --lp-r ) );
	padding: clamp( 40px, 5vw, 72px ) var( --lp-gutter ) clamp( 64px, 7vw, 110px );
	border-radius: var( --lp-r ) var( --lp-r ) 0 0;
	background: var( --lp-sheet );
	display: grid;
	gap: clamp( 56px, 7vw, 104px );
}

.lp h2 {
	margin: 0 0 14px;
	color: var( --lp-ink );
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp( 26px, 2.6vw, 38px );
	font-weight: 900;
	line-height: 1.12;
	text-wrap: balance;
}

.lp h3 {
	margin: 0 0 8px;
	color: var( --lp-ink );
	font-size: 17px;
	font-weight: 700;
}

.lp p,
.lp li {
	color: var( --lp-ink-2 );
	font-size: 16px;
	line-height: 1.6;
}

.lp p {
	margin: 0 0 14px;
	max-width: 42em;
}

.lp strong {
	color: var( --lp-ink );
}

.lp .lp-eyebrow {
	margin: 0 0 8px;
	color: var( --lp-brand-2 );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

html.after-hours .lp .lp-eyebrow {
	color: #7fc6c9;
}

/* Overview and spec ------------------------------------------------------- */

.lp-intro {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 32px, 5vw, 80px );
	align-items: start;
}

.lp-intro h2 {
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: clamp( 19px, 1.5vw, 24px );
	font-weight: 700;
}

.lp-spec {
	display: grid;
	margin: 0;
}

.lp-spec__row {
	display: grid;
	grid-template-columns: 80px minmax( 0, 1fr );
	gap: 16px;
	padding: 14px 0;
	/* Fainter than the page's other rules, as on every project's spec
	   sheet (Corey, 2026-10-17). */
	border-top: 1px solid rgba( 24, 34, 28, .055 );
}

html.after-hours .lp-spec__row {
	border-top-color: rgba( 233, 238, 234, .06 );
}

.lp-spec__row:first-child {
	padding-top: 0;
	border-top: 0;
}

.lp-spec dt {
	color: var( --lp-ink-3 );
	font-size: 14px;
	line-height: 21px;
}

.lp-spec dd {
	margin: 0;
	color: var( --lp-ink );
	font-size: 14px;
	line-height: 21px;
}

.lp-pill {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 9px;
	border-radius: 999px;
	background: #e6f3e9;
	color: #2d6a3f;
	font-size: 12px;
	font-weight: 700;
}

html.after-hours .lp-pill {
	background: #1f3a2a;
	color: #a7dcb6;
}

.lp-chip {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 2px 10px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var( --lp-rule );
	font-size: 13px;
}

/* The two problems -------------------------------------------------------- */

.lp-problems {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 16px;
}

.lp-card {
	padding: 26px 28px 22px;
	border-radius: 18px;
	background: var( --lp-card );
}

.lp-card p {
	margin: 0;
}

/* Sections ---------------------------------------------------------------- */

.lp-section {
	display: grid;
	justify-items: start;
}

.lp-section > .lp-pair,
.lp-section > .lp-phones,
.lp-section > .lp-shot,
.lp-section > .lp-demo__frame {
	justify-self: stretch;
	margin-top: clamp( 20px, 2.5vw, 36px );
}

.lp-pair {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: clamp( 16px, 2vw, 28px );
	align-items: start;
}

.lp-phones {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 260px ) );
	justify-content: center;
	gap: clamp( 16px, 3vw, 44px );
}

.lp-points {
	display: grid;
	gap: 10px;
	max-width: 46em;
	margin: clamp( 20px, 2.5vw, 32px ) 0 0;
	padding: 0 0 0 18px;
}

/* A screen ---------------------------------------------------------------- */

.lp-shot {
	margin: 0;
}

.lp-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 18px 40px -18px rgba( 20, 40, 45, .35 ),
		0 0 0 1px rgba( 20, 40, 45, .08 );
}

.lp-shot--phone img {
	border-radius: 26px;
	box-shadow:
		0 22px 44px -18px rgba( 20, 40, 45, .4 ),
		0 0 0 6px #0f1416,
		0 0 0 7px rgba( 255, 255, 255, .06 );
}

.lp-shot__empty {
	display: grid;
	place-items: center;
	min-height: 220px;
	padding: 24px;
	border-radius: 12px;
	background: repeating-linear-gradient( 135deg, rgba( 0, 86, 111, .06 ) 0 10px, rgba( 0, 86, 111, .02 ) 10px 20px );
	box-shadow: inset 0 0 0 1px var( --lp-rule );
	color: var( --lp-ink-3 );
	font-size: 14px;
	text-align: center;
}

.lp-shot figcaption {
	margin-top: 10px;
	color: var( --lp-ink-3 );
	font-size: 14px;
	line-height: 1.45;
}

/* The prototype to try ---------------------------------------------------- */

.lp-demo__frame {
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow:
		0 24px 50px -20px rgba( 20, 40, 45, .4 ),
		0 0 0 1px rgba( 20, 40, 45, .1 );
}

.lp-demo__frame iframe {
	display: block;
	width: 100%;
	height: min( 940px, 90vh );
	border: 0;
}

.lp .lp-demo__open {
	margin-top: 14px;
}

.lp .lp-demo__open a {
	color: var( --lp-brand-2 );
	font-weight: 700;
	text-underline-offset: 3px;
}

html.after-hours .lp .lp-demo__open a {
	color: #7fc6c9;
}

/* Still to write: marked plainly, in the draft only. */
.lp .cs-tk {
	display: inline;
	padding: 1px 6px;
	border-radius: 4px;
	background: #fff3c4;
	color: #6b5200;
	font-size: .9em;
}

.lp p.cs-tk {
	display: block;
	padding: 10px 14px;
}

html.after-hours .lp .cs-tk {
	background: #3a3215;
	color: #f0d98a;
}

/* Narrower screens -------------------------------------------------------- */

/* On desktop, where title and chat sit side by side, shorter still
   (Corey, 2026-10-17): less above the title and a lower chat box. */
@media only screen and ( min-width: 901px ) {
	.lp-hero {
		padding-top: clamp( 84px, 7vw, 100px );
	}

	.lp-hero__art .lp-chat {
		--lp-chat-h: clamp( 290px, 23vw, 330px );
	}
}

@media only screen and ( max-width: 900px ) {
	.lp-hero {
		grid-template-columns: minmax( 0, 1fr );
		/* More room under the site's logo before the company's name
		   (Corey, 2026-10-17; 96px before). */
		padding-top: 124px;
	}

	.lp-intro {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media only screen and ( max-width: 600px ) {
	.lp-phones {
		grid-template-columns: minmax( 0, 1fr );
		justify-items: center;
	}

	.lp-phones .lp-shot {
		width: min( 280px, 100% );
	}

	.lp-pair {
		grid-template-columns: minmax( 0, 1fr );
	}

	.lp-demo__frame iframe {
		height: 720px;
	}
}

/* The password (inc/case-lock.php; Corey, 2026-10-17) ----------------------
   Where the rest of the page would be: a small card that rises over the
   foot of the overview, the content under it blurring and fading away
   behind it, and fades in as the page opens. Minimal: a lock, a line, one
   field. The page ends there. */

.lp-lock {
	position: relative;
	z-index: 2;
	/* Well up over the overview's foot (Corey, 2026-10-17): over its
	   words is fine. */
	margin-top: calc( -1 * clamp( 56px, 7vw, 104px ) - 230px );
	padding-top: 100px;
}

/* The overview going under: faded into the sheet by colour alone, no
   blur (which left a halo round the words), slowly and on an eased curve
   so there is no line where the fade begins (Corey, 2026-10-17). */
.lp-lock::before {
	content: "";
	position: absolute;
	top: -280px;
	right: calc( -1 * var( --lp-gutter ) );
	bottom: 0;
	left: calc( -1 * var( --lp-gutter ) );
	/* The fade over its first 720px — begun high and slow, and carried on
	   past the card into the room below it (Corey, 2026-10-17), on a long
	   eased curve — then the sheet itself, so nothing of the overview
	   shows below the card however high it sits. */
	background: linear-gradient(
		to bottom,
		color-mix( in srgb, var( --lp-sheet ) 0%, transparent ) 0,
		color-mix( in srgb, var( --lp-sheet ) 3%, transparent ) 80px,
		color-mix( in srgb, var( --lp-sheet ) 9%, transparent ) 160px,
		color-mix( in srgb, var( --lp-sheet ) 19%, transparent ) 240px,
		color-mix( in srgb, var( --lp-sheet ) 33%, transparent ) 320px,
		color-mix( in srgb, var( --lp-sheet ) 50%, transparent ) 400px,
		color-mix( in srgb, var( --lp-sheet ) 67%, transparent ) 480px,
		color-mix( in srgb, var( --lp-sheet ) 82%, transparent ) 560px,
		color-mix( in srgb, var( --lp-sheet ) 93%, transparent ) 640px,
		var( --lp-sheet ) 720px
	);
	pointer-events: none;
}

.lp-lock__card {
	position: relative;
	max-width: 360px;
	margin: 0 auto;
	padding: 28px 26px 24px;
	border-radius: 20px;
	background: var( --lp-card );
	/* A hairline round it, barely there (Corey, 2026-10-17). */
	box-shadow: inset 0 0 0 1px rgba( 24, 34, 28, .045 ), 0 1px 0 rgba( 24, 34, 28, .05 ), 0 24px 50px -26px rgba( 0, 40, 50, .48 );
	text-align: center;
	animation: lp-lock-in .9s cubic-bezier( .22, 1, .36, 1 ) .25s both;
}

/* Roomier inside on tablets and up (Corey, 2026-10-17): more room at
   its edges and between the title, the line and the field, the card no
   wider. */
@media only screen and ( min-width: 601px ) {
	.lp-lock__card {
		box-sizing: border-box;
		max-width: 432px;
		padding: 44px 44px 40px;
	}

	.lp-lock__head {
		margin-bottom: 8px;
	}

	.lp-lock p {
		margin-bottom: 26px;
	}
}

/* Higher still on desktop, well over the overview, with room under it
   before the footer for the fade to finish in (Corey, 2026-10-17). */
@media only screen and ( min-width: 901px ) {
	.lp-lock {
		margin-top: calc( -1 * clamp( 56px, 7vw, 104px ) - 265px );
		padding-bottom: 160px;
	}

	.lp.lp-gate .lp-lock {
		margin-top: -255px;
	}
}

@keyframes lp-lock-in {
	from {
		opacity: 0;
		transform: translateY( 14px );
	}
}

/* Lato throughout the card, the title too (Corey, 2026-10-17). */
.lp .lp-lock,
.lp .lp-lock h2,
.lp .lp-lock input,
.lp .lp-lock button {
	font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* The lock beside the title where the card has the width, over it where
   it does not. */
.lp-lock__head {
	color: var( --lp-ink );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	margin-bottom: 4px;
}

.lp-lock__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	/* Just the lock, no disc behind it, its line a little heavier, in the
	   title's own colour (Corey, 2026-10-17). */
	color: inherit;
}

.lp-lock__icon svg {
	width: 21px;   /* 18px before (Corey, 2026-10-17) */
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* A padlock, not a bag (Corey, 2026-10-17): its shackle narrower than the
   body and tall, a keyhole in the body. */
.lp-lock__icon .lp-lock__keyhole-dot {
	fill: currentColor;
	stroke: none;
}

.lp .lp-lock h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

.lp-lock p {
	margin: 0 0 18px;
	color: var( --lp-ink-3 );
	font-size: 15.5px;   /* 14px before (Corey, 2026-10-17) */
}

.lp-lock .lp-lock__error {
	margin: -8px 0 14px;
	color: #a23a2a;
	font-weight: 700;
}

.lp-lock__form {
	text-align: left;
}

/* Read by screen readers; the field's placeholder says it to the eye. */
.lp-lock__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.lp-lock__row {
	display: flex;
	gap: 6px;
	padding: 4px;
	border: 1px solid rgba( 24, 34, 28, .16 );
	/* Gently rounded (Corey, 2026-10-17); the button inside takes this
	   less the border and padding, so the two corners run parallel. */
	--lp-lock-r: 12px;
	border-radius: var( --lp-lock-r );
	/* A breath of the sheet's tint, so the field reads as a field
	   (Corey, 2026-10-17). */
	background: #fafcfb;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.lp-lock__row:focus-within {
	border-color: var( --lp-brand-2 );
	box-shadow: 0 0 0 3px rgba( 11, 122, 138, .2 );
}

.lp-lock__row input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0 6px 0 14px;
	border: 0;
	background: transparent;
	color: var( --lp-ink );
	font: inherit;
	font-size: 16px;
	outline: none;
}

.lp-lock__row input::placeholder {
	color: #7c8582;
	opacity: 1;
}

.lp .lp-lock__row button {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: calc( var( --lp-lock-r ) - 5px ) !important;   /* over the theme's buttons */
	background: var( --lp-brand );
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.lp .lp-lock__row button:hover {
	background: var( --lp-brand-2 );
}

.lp-lock__row button:active {
	transform: scale( .94 );
}

.lp-lock__row button:focus-visible {
	outline: 3px solid rgba( 11, 122, 138, .45 );
	outline-offset: 2px;
}

.lp-lock__row button svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media ( prefers-reduced-motion: reduce ) {
	.lp-lock__card {
		animation: none;
	}
}

/* On a page-builder project (single-portfolio.php): the card over the
   foot of its opening section, which the builder stacks high (z-index
   100), so the card above that; the fade into that section's own grey. */
.lp.lp-gate {
	--lp-sheet: #f7f7f7;
	/* Its own box starts under the section; only the card reaches up. */
	display: flow-root;
	position: relative;
	z-index: 101;
	padding: 0 var( --lp-gutter ) clamp( 48px, 6vw, 80px );
	background: transparent;
}

.lp-gate .lp-lock {
	margin-top: -230px;
}

/* Below the card, the page carries on in the section's grey to the
   footer. */
.lp-gate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --lp-sheet );
}

html.after-hours .lp.lp-gate {
	--lp-sheet: #171b1e;
}

/* At night (After hours), the field dark with the card. */
html.after-hours .lp-lock__card {
	box-shadow: inset 0 0 0 1px rgba( 233, 238, 234, .055 ), 0 24px 50px -26px rgba( 0, 0, 0, .6 );
}

html.after-hours .lp-lock__row {
	border-color: rgba( 233, 238, 234, .2 );
	background: #0f1214;
}

html.after-hours .lp-lock__row input {
	color: #eceeea;
}

/* Where the story begins, for the return from the card. */
.lp-anchor {
	display: block;
	height: 0;
	margin-top: calc( -1 * clamp( 56px, 7vw, 104px ) );
	scroll-margin-top: 90px;
}