/* ==========================================================================
   Nick Blatchley Copywriting: Contact page
   Builds on nb-home.css (<main> carries both .nb-home and .nb-cpage).
   Form styles live in nb-contact.css, shared with the popup.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html:has(.nb-cpage) { scroll-behavior: smooth; }
}

/* Hero and direct contact ------------------------------------------------ */
.nb-cpage .nb-cpage-hero__title { max-width: 17ch; font-size: clamp(2.375rem, 5vw, 4.25rem); }
.nb-cpage .nb-cpage-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.nb-cpage .nb-cpage-hero__grid.has-photo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* Photo paper-clipped to the page */
.nb-cpage .nb-clipped {
	position: relative;
	justify-self: center;
	width: min(100%, 360px);
	margin: 0;
	padding: 12px 12px 16px;
	background: #fff;
	border: 1px solid var(--nb-rule);
	box-shadow: 0 26px 50px -32px rgba(17, 26, 71, .55);
	transform: rotate(-2deg);
}
.nb-cpage .nb-clipped img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.nb-cpage .nb-clipped figcaption {
	margin-top: 12px;
	font-family: var(--nb-hand);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--nb-ink);
	text-align: center;
}
/* A paperclip drawn in CSS: two nested rounded loops */
.nb-cpage .nb-clipped__clip {
	position: absolute;
	top: -26px; right: 38px;
	width: 22px; height: 66px;
	border: 3px solid #8a93a8;
	border-radius: 11px;
	transform: rotate(8deg);
	z-index: 1;
}
.nb-cpage .nb-clipped__clip::after {
	content: "";
	position: absolute;
	top: 8px; left: 3px;
	width: 10px; height: 44px;
	border: 3px solid #8a93a8;
	border-top: 0;
	border-radius: 0 0 6px 6px;
}
.nb-cpage .nb-cpage-hero .nb-hero__lead { margin: clamp(24px, 3vw, 36px) 0 34px; }

.nb-cpage .nb-cpage-direct {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0; padding: 0;
	list-style: none;
	max-width: 980px;
}
.nb-cpage .nb-cpage-direct li { margin: 0; }
.nb-cpage .nb-cpage-direct a {
	display: flex; flex-direction: column; gap: 4px;
	height: 100%;
	padding: 20px 22px;
	background: #fff;
	border: 1.5px solid var(--nb-ink);
	border-radius: var(--nb-radius);
	color: var(--nb-ink);
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.nb-cpage .nb-cpage-direct__label { font-family: var(--nb-hand); font-size: 1.625rem; line-height: 1; color: var(--nb-pencil); }
.nb-cpage .nb-cpage-direct strong { font-family: var(--nb-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.2; }
.nb-cpage .nb-cpage-direct__email { font-size: 1.0625rem !important; overflow-wrap: anywhere; }
.nb-cpage .nb-cpage-direct__best { font-size: .9375rem; color: var(--nb-muted); }
.nb-cpage .nb-cpage-direct a:hover { background: var(--nb-ink); color: #fff; }
.nb-cpage .nb-cpage-direct a:hover .nb-cpage-direct__label { color: #b8f5d8; }
.nb-cpage .nb-cpage-direct a:hover .nb-cpage-direct__best { color: #c3cae4; }

/* Form and sidebar ------------------------------------------------------- */
.nb-cpage .nb-cpage-form { scroll-margin-top: 10px; }
.nb-cpage .nb-cpage-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}
.nb-cpage .nb-form .nb-form__grid--three { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.nb-cpage .nb-cpage-form__main {
	padding: clamp(24px, 4vw, 44px);
	background: #fff;
	border: 1px solid var(--nb-rule);
	border-radius: 6px;
	box-shadow: 0 30px 60px -44px rgba(17, 26, 71, .55);
}
.nb-cpage .nb-cpage-form__main h2 { margin-bottom: 12px; }
.nb-cpage .nb-cpage-form__intro { margin-bottom: 26px; color: var(--nb-muted); }

.nb-cpage .nb-cpage-side { position: sticky; top: 24px; display: grid; gap: 22px; }
.nb-cpage .nb-cpage-side__card {
	padding: 22px 24px;
	background: var(--nb-pad);
	border-radius: var(--nb-radius);
}
.nb-cpage .nb-cpage-side__title {
	margin-bottom: 12px;
	font-family: var(--nb-hand);
	font-size: 2rem;
	line-height: 1;
	color: var(--nb-pencil);
}
.nb-cpage .nb-cpage-side__steps { margin: 0; padding: 0 0 0 22px; }
.nb-cpage .nb-cpage-side__steps li { margin: 0 0 10px; padding-left: 4px; font-size: 1rem; line-height: 1.5; }
.nb-cpage .nb-cpage-side__steps li::marker { font-family: var(--nb-serif); color: var(--nb-pencil); }
.nb-cpage .nb-cpage-side__steps strong { color: var(--nb-ink); }
.nb-cpage .nb-cpage-side__card p { font-size: 1rem; }
.nb-cpage .nb-cpage-side__social { display: flex; gap: 18px; margin-top: 10px; font-weight: 600; }

.nb-cpage .nb-cpage-side__quote { margin: 0; padding-left: 20px; border-left: 3px solid var(--nb-margin); }
.nb-cpage .nb-cpage-side__quote blockquote p {
	margin: 0;
	font-family: var(--nb-serif);
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--nb-ink);
}
.nb-cpage .nb-cpage-side__quote blockquote p::before { content: "“"; }
.nb-cpage .nb-cpage-side__quote blockquote p::after { content: "”"; }
.nb-cpage .nb-cpage-side__quote figcaption { margin-top: 10px; font-size: .9375rem; color: var(--nb-muted); }
.nb-cpage .nb-cpage-side__quote figcaption strong { display: block; color: var(--nb-text); }

/* A good brief ----------------------------------------------------------- */
.nb-cpage .nb-brief { background-color: var(--nb-pad); }
.nb-cpage .nb-brief__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}
.nb-cpage .nb-brief__list { margin: 0; padding: 0; list-style: none; }
.nb-cpage .nb-brief__list li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 16px 0 18px;
	border-top: 1px solid var(--nb-rule);
}
.nb-cpage .nb-brief__num { font-family: var(--nb-hand); font-size: 3rem; line-height: .85; color: var(--nb-pencil); }
.nb-cpage .nb-brief__list h3 { margin-bottom: 4px; font-size: 1.25rem; }
.nb-cpage .nb-brief__list p { font-size: 1.0625rem; }

/* The example brief, handwritten on an index card */
.nb-cpage .nb-brief__card {
	margin: 0;
	padding: 22px 28px 26px;
	background-color: #fff;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(160, 182, 214, .55) 39px, rgba(160, 182, 214, .55) 40px);
	background-position: 0 58px;
	border: 1px solid var(--nb-rule);
	border-radius: 3px;
	box-shadow: 0 24px 50px -36px rgba(17, 26, 71, .55);
	transform: rotate(1.5deg);
}
.nb-cpage .nb-brief__card-label {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--nb-margin);
	font-family: var(--nb-sans);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--nb-muted);
}
.nb-cpage .nb-brief__card p {
	margin: 0;
	max-width: none;
	font-family: var(--nb-hand);
	font-size: 1.75rem;
	line-height: 40px;
	color: var(--nb-ink);
}

/* Routes ----------------------------------------------------------------- */
.nb-cpage .nb-routes__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0; padding: 0;
	list-style: none;
}
.nb-cpage .nb-routes__list li { margin: 0; }
.nb-cpage .nb-routes__list a {
	display: flex; flex-direction: column;
	height: 100%;
	padding: 22px 22px 20px;
	border-top: 3px solid var(--nb-ink);
	background: #fff;
	box-shadow: 0 20px 44px -38px rgba(17, 26, 71, .5);
	color: var(--nb-text);
	text-decoration: none;
}
.nb-cpage .nb-routes__list h3 { margin-bottom: 8px; font-size: 1.25rem; }
.nb-cpage .nb-routes__list p { flex: 1; font-size: 1rem; }
.nb-cpage .nb-routes__link {
	margin-top: 14px;
	font-weight: 600;
	color: var(--nb-ink);
	text-decoration: underline;
	text-decoration-color: var(--nb-margin);
	text-underline-offset: 4px;
}
.nb-cpage .nb-routes__list a:hover { border-top-color: var(--nb-pencil); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.nb-cpage .nb-routes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
	.nb-cpage .nb-cpage-form__grid,
	.nb-cpage .nb-brief__grid,
	.nb-cpage .nb-cpage-hero__grid.has-photo { grid-template-columns: minmax(0, 1fr); }
	.nb-cpage .nb-clipped { justify-self: start; width: min(100%, 300px); }
	.nb-cpage .nb-cpage-side { position: static; max-width: 560px; }
	.nb-cpage .nb-brief__card { max-width: 520px; transform: none; }
}
@media (max-width: 760px) {
	.nb-cpage .nb-cpage-direct,
	.nb-cpage .nb-routes__list { grid-template-columns: minmax(0, 1fr); }
	.nb-cpage .nb-cpage-form__main { padding: 22px 18px; }
	.nb-cpage .nb-brief__card p { font-size: 1.5rem; }
}