/* ==========================================================================
   Nick Blatchley Copywriting: homepage styles
   Everything here is scoped to .nb-home so it can never affect the header
   or footer. Header and footer styles live in nb-global.css only.
   ========================================================================== */

.nb-home {
	--nb-gap: 28px;          /* space between page edge of the wrap and content */
	--nb-line-x: 8px;        /* where the margin line sits */
	display: block;
	overflow-x: clip;
}

/* Base type (defends against the parent theme's global styles) ---------- */
.nb-home h1,
.nb-home h2,
.nb-home h3,
.nb-home h4 {
	margin: 0;
	font-family: var(--nb-serif);
	font-weight: 400;
	color: var(--nb-ink);
	letter-spacing: -0.005em;
	text-transform: none;
}
.nb-home h2 { font-size: clamp(2rem, 3.6vw, 3.0625rem); line-height: 1.1; max-width: 22ch; }
.nb-home h3 { font-size: 1.375rem; line-height: 1.25; }
.nb-home h4 { font-size: 1.3125rem; line-height: 1.3; }
.nb-home p { margin: 0 0 1em; max-width: 64ch; }
.nb-home p:last-child { margin-bottom: 0; }
.nb-home a { color: var(--nb-ink); text-decoration-color: var(--nb-margin); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nb-home blockquote { margin: 0; padding: 0; border: 0; quotes: "“" "”"; }
.nb-home figure { margin: 0; }

/* Page structure: the exercise-book margin line -------------------------- */
.nb-home .nb-wrap {
	position: relative;
	width: min(var(--nb-shell), 100% - (var(--nb-gutter) * 2));
	margin-inline: auto;
	padding-block: clamp(64px, 9vw, 120px);
	padding-left: var(--nb-gap);
}
.nb-home .nb-wrap::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: var(--nb-line-x);
	width: 2px;
	background: var(--nb-margin);
	opacity: .55;
}

.nb-home .nb-section__intro { margin-bottom: clamp(36px, 5vw, 56px); }
.nb-home .nb-section__intro h2 + p { margin-top: 18px; color: var(--nb-muted); font-size: 1.1875rem; }

/* Pencil notes: in the margin on wide screens, inline on smaller ones ---- */
.nb-home .nb-annotated { position: relative; }
.nb-home .nb-note {
	display: block;
	max-width: 22ch;
	margin: 0 0 14px;
	font-family: var(--nb-hand);
	font-size: 2.25rem;
	line-height: .95;
	color: var(--nb-pencil);
	transform: rotate(-3deg);
	transform-origin: left center;
}

@media (min-width: 760px) {
	.nb-home { --nb-gap: 76px; --nb-line-x: 44px; }
}

@media (min-width: 1140px) {
	.nb-home { --nb-gap: 224px; --nb-line-x: 190px; }

	.nb-home .nb-annotated > .nb-note {
		position: absolute;
		top: 4px;
		right: calc(100% + 58px);
		width: 160px;
		margin: 0;
		text-align: right;
		transform: rotate(-5deg);
		transform-origin: right top;
	}
}

/* Section grounds -------------------------------------------------------- */
.nb-home .nb-hero,
.nb-home .nb-services,
.nb-home .nb-process,
.nb-home .nb-faq { background-color: var(--nb-pad); }
.nb-home .nb-why { border-top: 1px solid var(--nb-rule); }

.nb-home .nb-hero,
.nb-home .nb-close {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 43px,
		rgba(160, 182, 214, .45) 43px,
		rgba(160, 182, 214, .45) 44px
	);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.nb-home .nb-hero .nb-wrap { padding-block: clamp(56px, 9vw, 128px) clamp(64px, 9vw, 120px); }

.nb-home .nb-hero__edit { margin-bottom: clamp(18px, 2.5vw, 28px); }

.nb-home .nb-hero__cliche {
	max-width: 42ch;
	margin: 0;
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.5;
	color: var(--nb-muted);
}
.nb-home .nb-hero__cliche del {
	text-decoration: none;
	background-image: linear-gradient(var(--nb-pencil), var(--nb-pencil));
	background-repeat: no-repeat;
	background-position: 0 58%;
	background-size: 100% 3px;
	animation: nb-strike .9s cubic-bezier(.6, 0, .3, 1) .5s both;
}

.nb-home .nb-note--hero {
	font-size: 2.5rem;
	animation: nb-write .8s steps(14, end) 1.45s both;
}

@keyframes nb-strike {
	from { background-size: 0 3px; }
	to   { background-size: 100% 3px; }
}
@keyframes nb-write {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.nb-home .nb-hero__title {
	max-width: 17ch;
	font-size: clamp(2.5rem, 5.8vw, 4.75rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.nb-home .nb-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin-top: clamp(28px, 4vw, 44px);
}
.nb-home .nb-hero__lead {
	max-width: 56ch;
	font-size: clamp(1.1875rem, 1.6vw, 1.3125rem);
	line-height: 1.6;
}
.nb-home .nb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

/* ==========================================================================
   Before and after
   ========================================================================== */
.nb-home .nb-compare__tabs {
	display: flex; flex-wrap: wrap; gap: 6px 28px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--nb-rule);
}
.nb-home .nb-compare__tab {
	position: relative;
	padding: 12px 0 14px;
	border: 0;
	background: none;
	color: var(--nb-muted);
	font-family: var(--nb-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
}
.nb-home .nb-compare__tab::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 3px;
	background: transparent;
}
.nb-home .nb-compare__tab:hover { color: var(--nb-ink); }
.nb-home .nb-compare__tab[aria-selected="true"] { color: var(--nb-ink); }
.nb-home .nb-compare__tab[aria-selected="true"]::after { background: var(--nb-ink); }

.nb-home .nb-compare__panel {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.nb-home .nb-compare__panel[hidden] { display: none; }
.nb-home .nb-compare__panel:focus-visible { outline-offset: 10px; }

.nb-home .nb-compare__before h3,
.nb-home .nb-compare__after h3 {
	margin-bottom: 14px;
	font-family: var(--nb-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--nb-muted);
}
.nb-home .nb-compare__before {
	padding: 24px 26px;
	border: 1px dashed var(--nb-rule);
	border-radius: var(--nb-radius);
	color: var(--nb-muted);
	font-size: 1.0625rem;
}
.nb-home .nb-compare__after { padding-top: 24px; }
.nb-home .nb-compare__after h3 { color: var(--nb-pencil); }
.nb-home .nb-compare__after p {
	font-family: var(--nb-serif);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.55;
	color: var(--nb-ink);
	max-width: 46ch;
}
.nb-home .nb-compare__panel > .nb-note { grid-column: 1 / -1; }

@media (min-width: 1140px) {
	.nb-home .nb-compare__panel > .nb-note { grid-column: auto; }
}

/* ==========================================================================
   Services
   ========================================================================== */
.nb-home .nb-services__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 5vw, 72px);
	margin: 0; padding: 0;
	list-style: none;
}
.nb-home .nb-services__item {
	margin: 0;
	padding: 30px 0 34px;
	border-top: 1px solid var(--nb-rule);
}
.nb-home .nb-services__item h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); margin-bottom: 12px; }
.nb-home .nb-services__item h3 a { text-decoration: none; }
.nb-home .nb-services__item h3 a:hover { text-decoration: underline; text-decoration-color: var(--nb-margin); }
.nb-home .nb-services__item p { color: var(--nb-text); max-width: 52ch; }
.nb-home .nb-services__more { margin-top: 24px; }

/* ==========================================================================
   Ongoing support
   ========================================================================== */
.nb-home .nb-ongoing__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(36px, 6vw, 88px);
}
.nb-home .nb-ongoing__ask {
	margin-bottom: 20px;
	font-family: var(--nb-hand);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--nb-pencil);
}
.nb-home .nb-ongoing__offer { padding: 22px 0; border-top: 1px solid var(--nb-rule); }
.nb-home .nb-ongoing__offer h4 { margin-bottom: 8px; }
.nb-home .nb-ongoing__offer h4 a { text-decoration: none; }
.nb-home .nb-ongoing__offer h4 a:hover { text-decoration: underline; text-decoration-color: var(--nb-margin); }

/* ==========================================================================
   Why a copywriter
   ========================================================================== */
.nb-home .nb-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: start;
}
.nb-home .nb-why__copy h2 { margin-bottom: 28px; }
.nb-home .nb-why__copy p { line-height: 1.7; }
.nb-home .nb-why__sign {
	margin-top: 28px;
	font-family: var(--nb-serif);
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--nb-ink);
}

.nb-home .nb-why__aside { position: sticky; top: 32px; }
.nb-home .nb-why__photo {
	display: block;
	width: 100%;
	margin-bottom: 32px;
	border-radius: var(--nb-radius);
	object-fit: cover;
	aspect-ratio: 5 / 6;
}
.nb-home .nb-why__quote {
	padding: 30px 0 0;
	border-top: 3px solid var(--nb-ink);
}
.nb-home .nb-why__quote blockquote p {
	font-family: var(--nb-serif);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	line-height: 1.3;
	color: var(--nb-ink);
	text-indent: -.42em;
}
.nb-home .nb-why__quote blockquote p::before { content: open-quote; }
.nb-home .nb-why__quote blockquote p::after { content: close-quote; }
.nb-home .nb-why__quote figcaption { margin-top: 14px; font-size: .9375rem; color: var(--nb-muted); }
.nb-home .nb-why__quote cite { font-style: italic; }
.nb-home .nb-note--inline { margin-top: 18px; }

/* ==========================================================================
   Process
   ========================================================================== */
.nb-home .nb-process__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	margin: 0; padding: 0;
	list-style: none;
	counter-reset: none;
}
.nb-home .nb-process__step { margin: 0; padding-top: 6px; border-top: 1px solid var(--nb-rule); }
.nb-home .nb-process__num {
	display: block;
	font-family: var(--nb-hand);
	font-size: 5.25rem;
	line-height: 1;
	color: var(--nb-pencil);
}
.nb-home .nb-process__step h3 { margin: 6px 0 10px; }
.nb-home .nb-process__step p { font-size: 1.0625rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.nb-home .nb-praise { background: var(--nb-ink); color: #e4e8f6; }
.nb-home .nb-praise .nb-wrap::before { opacity: .8; }

.nb-home .nb-praise__lead blockquote p {
	max-width: 22ch;
	font-family: var(--nb-serif);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	line-height: 1.12;
	color: #fff;
	text-indent: -.4em;
}
.nb-home .nb-praise blockquote p::before { content: open-quote; }
.nb-home .nb-praise blockquote p::after { content: close-quote; }
.nb-home .nb-praise figcaption { margin-top: 18px; font-size: 1rem; color: #b9c1e0; }
.nb-home .nb-praise figcaption strong { display: block; color: #fff; font-weight: 600; }

.nb-home .nb-praise__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(32px, 5vw, 72px);
	margin-top: clamp(48px, 6vw, 80px);
}
.nb-home .nb-praise__item { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.nb-home .nb-praise__item blockquote p { font-size: 1.1875rem; line-height: 1.6; color: #fff; }
.nb-home .nb-praise__more { margin-top: 28px; }
.nb-home .nb-praise .nb-btn--plain { color: #fff; border-color: #fff; }
.nb-home .nb-praise .nb-btn--plain:hover { background: #fff; color: var(--nb-ink); }

/* ==========================================================================
   Latest posts
   ========================================================================== */
.nb-home .nb-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
}
.nb-home .nb-latest__post { display: flex; flex-direction: column; }
.nb-home .nb-latest__media {
	display: block;
	aspect-ratio: 3 / 2;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: var(--nb-radius);
	background: var(--nb-pad);
	text-decoration: none;
}
.nb-home .nb-latest__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-home .nb-latest__placeholder {
	display: block;
	height: 100%;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--nb-rule) 27px, var(--nb-rule) 28px);
}
.nb-home .nb-latest__post time { font-size: .9375rem; color: var(--nb-muted); }
.nb-home .nb-latest__post h3 { margin: 6px 0 10px; }
.nb-home .nb-latest__post h3 a { text-decoration: none; }
.nb-home .nb-latest__post h3 a:hover { text-decoration: underline; text-decoration-color: var(--nb-margin); }
.nb-home .nb-latest__post p { font-size: 1.0625rem; color: var(--nb-text); }
.nb-home .nb-latest__more { margin-top: 36px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.nb-home .nb-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.nb-home .nb-faq__item { border-top: 1px solid var(--nb-rule); }
.nb-home .nb-faq__item:last-child { border-bottom: 1px solid var(--nb-rule); }
.nb-home .nb-faq__item summary {
	position: relative;
	padding: 22px 48px 22px 0;
	list-style: none;
	font-family: var(--nb-serif);
	font-size: 1.3125rem;
	line-height: 1.35;
	color: var(--nb-ink);
	cursor: pointer;
}
.nb-home .nb-faq__item summary::-webkit-details-marker { display: none; }
.nb-home .nb-faq__item summary::before,
.nb-home .nb-faq__item summary::after {
	content: "";
	position: absolute; right: 10px; top: 50%;
	width: 16px; height: 2px;
	background: var(--nb-ink);
	transition: transform .2s;
}
.nb-home .nb-faq__item summary::after { transform: rotate(90deg); }
.nb-home .nb-faq__item[open] summary::after { transform: rotate(0deg); }
.nb-home .nb-faq__item p { padding: 0 48px 26px 0; }

/* ==========================================================================
   Closing call to action
   ========================================================================== */
.nb-home .nb-close__inner h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); max-width: 18ch; margin-bottom: 20px; }
.nb-home .nb-close__inner > p:not(.nb-note) { font-size: 1.1875rem; max-width: 52ch; margin-bottom: 28px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
	.nb-home .nb-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nb-home .nb-why__grid,
	.nb-home .nb-faq__grid { grid-template-columns: minmax(0, 1fr); }
	.nb-home .nb-why__aside { position: static; max-width: 560px; }
}

@media (max-width: 760px) {
	.nb-home .nb-compare__panel,
	.nb-home .nb-services__list,
	.nb-home .nb-ongoing__split,
	.nb-home .nb-praise__grid,
	.nb-home .nb-latest__grid,
	.nb-home .nb-process__list { grid-template-columns: minmax(0, 1fr); }

	.nb-home .nb-compare__after { padding-top: 0; }
	.nb-home .nb-hero__actions .nb-btn { flex: 1 1 100%; }
	.nb-home .nb-wrap::before { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
	.nb-home .nb-hero__cliche del,
	.nb-home .nb-note--hero { animation: none; }
}