/* ===========================================================================
   WORK WITH NATHAN
   Built from "Work With Nathan.dc.html", route 1a (portrait-led), which
   Nathan chose on 7 Sep 2026. Route 1b is not built.

   QUIETER REGISTER THAN THE REST OF THE SITE, and that is the design's whole
   point: yellow is a highlight and a button colour only, no yellow section
   grounds, no pattern fills, and shadows at 4px rather than the 8-12px the
   homepage and sponsor page use. Do not "bring it in line" with those pages;
   the restraint is the brief.

   Loaded on this page only. Namespaced .atc-wwn.
   =========================================================================== */

.atc-wwn {
	background: var(--atc-white, #FFFFFF);
	color: var(--atc-black, #0A0A0A);
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}
.atc-wwn *, .atc-wwn *::before, .atc-wwn *::after { box-sizing: border-box; }
.atc-wwn__inner { max-width: 1200px; margin: 0 auto; }
.atc-wwn [id] { scroll-margin-top: 104px; }

/* A 2px black rule opening a section, which is this page's main divider. */
.atc-wwn-rule { border-top: 2px solid var(--atc-black, #0A0A0A); padding-top: 64px; }

.atc-wwn-eyebrow {
	margin: 0 0 48px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}
.atc-wwn-h2 {
	margin: 0 0 40px;
	font-size: 34px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.atc-wwn-h2--light { color: var(--atc-white, #FFFFFF); font-size: 40px; line-height: 1.03; margin-bottom: 24px; }

.atc-wwn-btn {
	display: inline-block;
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 999px;
	padding: 18px 36px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	color: var(--atc-black, #0A0A0A);
	transition: transform 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            box-shadow 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-wwn-btn:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 3px; }
/* 4px, not the 8-12px used elsewhere. The design asks for a quieter shadow. */
.atc-wwn-btn--yellow { background: var(--atc-yellow, #FFE600); box-shadow: 4px 4px 0 0 var(--atc-black, #0A0A0A); }
.atc-wwn-btn--yellow:hover, .atc-wwn-btn--yellow:focus { color: var(--atc-black, #0A0A0A); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A); }
.atc-wwn-btn--outline { background: transparent; padding: 16px 30px; }
.atc-wwn-btn--outline:hover, .atc-wwn-btn--outline:focus { color: var(--atc-black, #0A0A0A); background: var(--atc-yellow, #FFE600); }

/* --- hero --------------------------------------------------------------- */
.atc-wwn-hero { padding: 96px 40px 88px; }
.atc-wwn-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.atc-wwn-hero__title {
	margin: 0 0 32px;
	font-size: 56px;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}
.atc-wwn-hero__lede { margin: 0 0 22px; font-size: 20px; line-height: 1.65; color: var(--atc-ink-700, #2E2E2E); max-width: 52ch; }
.atc-wwn-hero__lede + .atc-wwn-hero__lede { margin-bottom: 40px; }
/* The single yellow highlight in the hero, and the only one on the page. */
.atc-wwn-mark { background: var(--atc-yellow, #FFE600); color: inherit; padding: 0 5px; font-weight: 800; }
.atc-wwn-hero__portrait {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 56% 22%;
	border-radius: 4px;
	display: block;
}

/* --- what I bring ------------------------------------------------------- */
.atc-wwn-bring { padding: 0 40px 96px; }
.atc-wwn-bring__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.atc-wwn-bring__card { background: var(--atc-ink-100, #F2F2F2); border-radius: 18px; padding: 30px; }
.atc-wwn-bring__head { margin: 0 0 14px; font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.08; letter-spacing: -0.02em; }
.atc-wwn-bring__body { margin: 0; font-size: 17px; line-height: 1.65; color: var(--atc-ink-700, #2E2E2E); }

/* --- three ways I work -------------------------------------------------- */
.atc-wwn-ways { background: var(--atc-ink-100, #F2F2F2); padding: 80px 40px 88px; margin-bottom: 96px; }
.atc-wwn-ways .atc-wwn-h2 { margin-bottom: 44px; }
.atc-wwn-ways__list { display: flex; flex-direction: column; gap: 20px; }
.atc-wwn-way {
	border-top: 2px solid var(--atc-black, #0A0A0A);
	padding: 40px 0 44px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.atc-wwn-way__name { margin: 0; font-size: 38px; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; }
.atc-wwn-way__para { margin: 0 0 18px; font-size: 18px; line-height: 1.7; color: var(--atc-ink-700, #2E2E2E); }
.atc-wwn-way__para:last-of-type { margin-bottom: 26px; }
.atc-wwn-way__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 26px; }
/* The third door has two short values, so the design sets them inline. */
.atc-wwn-way__facts.is-inline { display: flex; gap: 56px; flex-wrap: wrap; }
.atc-wwn-way__label { margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atc-ink-600, #565656); }
.atc-wwn-way__value { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.4; }
.atc-wwn-way__good {
	margin: 0;
	background: var(--atc-white, #FFFFFF);
	border-radius: 14px;
	padding: 20px 24px;
	display: inline-block;
	font-size: 17px;
	line-height: 1.55;
}
.atc-wwn-way__good em { font-style: italic; }
.atc-wwn-ways__foot { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 44px; }
.atc-wwn-ways__closer { margin: 0; font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.02em; max-width: 44ch; }
.atc-wwn-ways__foot .atc-wwn-btn { flex: 0 0 auto; }

/* --- who I've worked with ----------------------------------------------- */
.atc-wwn-clients { padding: 0 40px 96px; }
.atc-wwn-clients__grid {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 32px;
}
.atc-wwn-clients__cell {
	min-height: 82px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	border-bottom: 2px solid var(--atc-ink-200, #E6E6E6);
}
.atc-wwn-clients__cell span { font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; }
.atc-wwn-quote { margin: 0; max-width: 74ch; }
.atc-wwn-quote__text { margin: 0 0 20px; padding: 0; border: 0; background: none; font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; }
.atc-wwn-quote__cite { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atc-ink-600, #565656); }

/* --- just need an hour -------------------------------------------------- */
.atc-wwn-hour { padding: 0 40px 96px; }
.atc-wwn-hour__card { border: 2px solid var(--atc-black, #0A0A0A); border-radius: 20px; padding: 34px 38px; display: flex; align-items: center; gap: 44px; }
.atc-wwn-hour__copy { flex: 1 1 auto; }
.atc-wwn-hour__head { margin: 0 0 12px; font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.02em; }
.atc-wwn-hour__body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--atc-ink-700, #2E2E2E); max-width: 66ch; }
.atc-wwn-hour__card .atc-wwn-btn { flex: 0 0 auto; }

/* --- get in touch ------------------------------------------------------- */
.atc-wwn-enquire { background: var(--atc-black, #0A0A0A); padding: 88px 40px; }
.atc-wwn-enquire__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.atc-wwn-enquire__lede { margin: 0; font-size: 20px; line-height: 1.65; color: var(--atc-ink-300, #CFCFCF); max-width: 46ch; }
.atc-wwn-form { background: var(--atc-white, #FFFFFF); border-radius: 20px; padding: 34px; }
/*
 * HubSpot's iframe. It sizes itself only because the theme sizes it; see the
 * loader in functions.php. Never pin a height here.
 */
.atc-wwn-form__embed { min-height: 320px; }
.atc-wwn-form__embed.is-sized { min-height: 0; }
.atc-wwn-form__embed iframe { max-width: 100% !important; }

/* --- tablet ------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	.atc-wwn-hero__grid,
	.atc-wwn-enquire__grid { grid-template-columns: 1fr; gap: 44px; }
	.atc-wwn-hero__title { font-size: 44px; }
	.atc-wwn-hero__portrait { max-width: 460px; }
	.atc-wwn-bring__grid { grid-template-columns: 1fr; }
	.atc-wwn-way { grid-template-columns: 1fr; gap: 20px; }
	.atc-wwn-clients__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- mobile, against the drawn 390px artboards -------------------------- */
@media only screen and (max-width: 767px) {
	.atc-wwn-hero { padding: 40px 18px 44px; }
	.atc-wwn-bring,
	.atc-wwn-clients,
	.atc-wwn-hour { padding: 0 18px 48px; }
	.atc-wwn-ways { padding: 44px 18px 48px; margin-bottom: 48px; }
	.atc-wwn-enquire { padding: 48px 18px; }
	.atc-wwn-rule { padding-top: 40px; }

	.atc-wwn-hero__title { font-size: 34px; margin-bottom: 22px; }
	.atc-wwn-hero__lede { font-size: 17px; }
	.atc-wwn-hero__portrait { max-width: none; }
	.atc-wwn-btn { display: block; text-align: center; padding: 16px; }
	.atc-wwn-h2 { font-size: 28px; margin-bottom: 28px; }
	.atc-wwn-h2--light { font-size: 30px; }
	.atc-wwn-eyebrow { margin-bottom: 28px; }

	.atc-wwn-way__name { font-size: 30px; }
	.atc-wwn-way__para { font-size: 17px; }
	.atc-wwn-way__facts,
	.atc-wwn-way__facts.is-inline { display: grid; grid-template-columns: 1fr; gap: 18px; }
	.atc-wwn-way__good { display: block; padding: 18px; font-size: 16px; }
	.atc-wwn-ways__foot { flex-direction: column; align-items: stretch; gap: 24px; }
	.atc-wwn-ways__closer { font-size: 20px; }

	.atc-wwn-clients__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin-bottom: 36px; }
	.atc-wwn-clients__cell { min-height: 64px; }
	.atc-wwn-clients__cell span { font-size: 17px; }
	.atc-wwn-quote__text { font-size: 21px; }

	.atc-wwn-hour__card { flex-direction: column; align-items: stretch; gap: 22px; padding: 24px; }
	.atc-wwn-form { padding: 22px; border-radius: 16px; }
}