/*
 * Design Your Direction — 2026 page design
 * ---------------------------------------------------------------
 * A second, self-contained design layer for the rebuilt Home,
 * Work With Jen, Resources and Contact pages. Everything is
 * namespaced under .jen so it cannot collide with the original
 * .dyd styles in style.css, which still serve the older pages
 * until they are retired.
 *
 * Palette values were sampled from the approved mockups rather
 * than guessed — see the token block below.
 */

:root {
	/* Sampled from the mockups (regional mode, not eyedropper guesswork) */
	--jen-navy:        #012f69;  /* headings, footer, dark buttons */
	--jen-navy-mid:    #2c5b93;  /* the solid navy button on Resources */
	--jen-orange:      #fd5417;  /* primary CTA + eyebrow labels */
	--jen-orange-dark: #e04409;
	--jen-blue:        #e4f6fe;  /* light blue cards */
	--jen-blue-soft:   #ebf8fe;  /* light blue section bands */
	--jen-cream:       #fdf4eb;  /* cream cards */
	--jen-cream-soft:  #fef9f2;  /* cream section bands */
	--jen-body:        #3f5572;  /* body copy */
	--jen-body-soft:   #64748b;
	--jen-rule:        rgba(1, 47, 105, .14);
	--jen-white:       #fff;

	--jen-head:  "Poppins", "Helvetica Neue", Arial, sans-serif;
	--jen-text:  "Inter", "Helvetica Neue", Arial, sans-serif;

	/* Measured off the mockups: content runs to ~91-95% of page width,
	   i.e. roughly a 1320px container with a ~44px gutter at 1440. The
	   original 1180/56 was noticeably narrower than the design. */
	--jen-max:   1320px;
	--jen-pad:   clamp(20px, 3.2vw, 44px);
	--jen-gap:   clamp(34px, 4.4vw, 58px);
}

/* =========================================================
   SHELL
   ========================================================= */

.jen { font-family: var(--jen-text); color: var(--jen-body); }
.jen * { box-sizing: border-box; }

.jen-section { padding-block: var(--jen-gap); }
.jen-section--tight { padding-block: clamp(22px, 3vw, 38px); }
.jen-section--flush { padding-block: 0; }
.jen-inner { max-width: var(--jen-max); margin-inline: auto; padding-inline: var(--jen-pad); }
.jen-inner > .wp-block-columns:last-child { margin-bottom: 0; }
.jen-inner > .wp-block-columns:first-child { margin-top: 0; }

.jen-bg-blue   { background: var(--jen-blue-soft); }
.jen-bg-cream  { background: var(--jen-cream-soft); }
.jen-bg-white  { background: var(--jen-white); }

/* =========================================================
   TYPE
   ========================================================= */

.jen h1, .jen h2, .jen h3, .jen h4 {
	font-family: var(--jen-head);
	color: var(--jen-navy);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
}
.jen h1 { font-size: clamp(2rem, 4.2vw, 3.05rem); line-height: 1.1; }
.jen h2 { font-size: clamp(1.5rem, 2.9vw, 2.15rem); margin-bottom: .4em; }
.jen h3 { font-size: clamp(1.18rem, 1.8vw, 1.45rem); }

.jen p { font-size: 1rem; line-height: 1.65; margin: 0 0 1em; }
.jen p:last-child { margin-bottom: 0; }
.jen strong { color: var(--jen-navy); }

/* Orange letterspaced kicker above a heading */
.jen-eyebrow {
	font-family: var(--jen-text) !important;
	font-size: .76rem !important;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jen-orange);
	margin: 0 0 .9em !important;
}
.jen-eyebrow--navy { color: var(--jen-navy); letter-spacing: .13em; }
.jen-card .jen-eyebrow { margin-bottom: .7em !important; }

.jen-lead { font-size: 1.1rem !important; line-height: 1.58; }
.jen-center { text-align: center; }
.jen-center .jen-eyebrow { text-align: center; }

/* Short orange rule under a card label */
.jen-rule-orange::after {
	content: "";
	display: block;
	width: 58px; height: 3px;
	background: var(--jen-orange);
	border-radius: 2px;
	margin-top: .6em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.jen .wp-block-buttons { gap: .7em; margin-block: 1.5em 0; }

.jen .jen-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--jen-text);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.25;
	padding: .92em 1.5em;
	border-radius: 7px;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* Filled orange — the primary action */
.jen .jen-btn--orange > .wp-block-button__link {
	background: var(--jen-orange);
	color: #fff !important;
}
.jen .jen-btn--orange > .wp-block-button__link:hover { background: var(--jen-orange-dark); }

/* Outlined — the secondary action */
.jen .jen-btn--ghost > .wp-block-button__link {
	background: #fff;
	color: var(--jen-navy) !important;
	border-color: var(--jen-rule);
}
.jen .jen-btn--ghost > .wp-block-button__link:hover { border-color: var(--jen-navy); }

/* Solid navy — used once, on the Resources course panel */
.jen .jen-btn--navy > .wp-block-button__link {
	background: var(--jen-navy-mid);
	color: #fff !important;
}
.jen .jen-btn--navy > .wp-block-button__link:hover { background: var(--jen-navy); }

.jen .jen-btn > .wp-block-button__link::after { content: "\2192"; font-size: 1.02em; line-height: 1; }
.jen .jen-btn--noarrow > .wp-block-button__link::after { content: none; }
.jen .jen-btn--block { width: 100%; }
.jen .jen-btn--block > .wp-block-button__link { width: 100%; }

/* =========================================================
   CARDS
   ========================================================= */

.jen-card {
	padding: clamp(20px, 2.1vw, 26px);
	border-radius: 12px;
	height: 100%;
}
/* Card copy runs tighter than page copy — the cards are equal-height, so
   every saved line shortens the tallest card and shrinks the empty space
   above the buttons on the shorter ones. */
.jen-card p { line-height: 1.55; margin-bottom: .75em; }
.jen-card h3 { margin-bottom: .45em; line-height: 1.22; }
.jen-card--blue  { background: var(--jen-blue); }
.jen-card--cream { background: var(--jen-cream); }
.jen-card--white { background: #fff; border: 1px solid var(--jen-rule); }

.jen-cards.wp-block-columns { gap: clamp(18px, 2vw, 26px) !important; align-items: stretch; }
.jen-cards > .wp-block-column { display: flex; }
.jen-cards > .wp-block-column > * { width: 100%; }

/* Push a card's button to the bottom so a row of cards lines up */
.jen-card { display: flex; flex-direction: column; }
.jen-card > .wp-block-buttons { margin-top: auto; padding-top: .95em; margin-bottom: 0; }

/* =========================================================
   HERO
   ========================================================= */

/* The hero is NOT inside .jen-inner. Its left column carries the container's
   own left gutter so the copy still lines up with every section below, while
   the blue panel runs off the right edge of the page exactly as drawn. */
.jen-hero.wp-block-columns {
	max-width: none;
	margin-inline: 0;
	margin-block: 0;
	gap: clamp(26px, 3.2vw, 44px) !important;
	align-items: center;
	padding-left: max(var(--jen-pad), calc((100% - var(--jen-max)) / 2 + var(--jen-pad)));
	padding-right: 0;
}
.jen-hero > .wp-block-column { margin: 0; }
.jen-hero .jen-portrait {
	background: var(--jen-blue);
	border-radius: 14px 0 0 14px;
	padding: clamp(18px, 1.9vw, 26px);
	padding-right: clamp(18px, 2.6vw, 40px);
}
/* Photo left, bio right. The photo is a tall 2:3 portrait that fills the
   panel's full height — the panel's height is set by the bio text beside
   it, and the image crops to fit rather than dictating the proportions. */
.jen-portrait-row.wp-block-columns { gap: clamp(16px, 1.8vw, 24px) !important; margin-block: 0; align-items: stretch; }
.jen-portrait-row > .wp-block-column { margin: 0; align-self: stretch !important; }
.jen-portrait-row > .wp-block-column:first-child { min-height: 240px; }
.jen-portrait .wp-block-image,
.jen-portrait figure { margin: 0; height: 100%; }
.jen-portrait img {
	border-radius: 10px;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}
.jen-portrait h2 { font-size: clamp(1.3rem, 1.85vw, 1.7rem); margin-bottom: .2em; line-height: 1.2; }
.jen-portrait .jen-eyebrow { font-size: .72rem !important; letter-spacing: .1em; margin-bottom: 1em !important; }
.jen-portrait p { font-size: 1rem; line-height: 1.5; margin-bottom: .75em; }
.jen-portrait p:last-child { margin-bottom: 0; }

/* =========================================================
   FOUR-STEP CHEVRON FLOW
   ========================================================= */

.jen-steps.wp-block-columns { gap: 6px !important; align-items: stretch; }
.jen-steps > .wp-block-column {
	position: relative;
	padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 30px);
	border-radius: 8px;
}
.jen-steps > .wp-block-column:nth-child(odd)  { background: var(--jen-blue); }
.jen-steps > .wp-block-column:nth-child(even) { background: var(--jen-cream); }
.jen-step-title {
	font-family: var(--jen-head) !important;
	font-size: .84rem !important;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--jen-navy);
	margin: 0 0 .5em !important;
}
.jen-steps p:not(.jen-step-title) { font-size: .9rem !important; line-height: 1.5; margin-bottom: 0; }

/* The notch that makes each step read as an arrow */
@media (min-width: 782px) {
	.jen-steps > .wp-block-column { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); padding-left: clamp(28px, 2.6vw, 42px); }
	.jen-steps > .wp-block-column:first-child { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); padding-left: clamp(16px, 2vw, 30px); }
	.jen-steps > .wp-block-column:last-child  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%); }
}

/* =========================================================
   ICON TILES
   ========================================================= */

.jen-tiles.wp-block-columns { gap: clamp(12px, 1.4vw, 18px) !important; align-items: stretch; }
.jen-tile {
	background: #f4f8fc;
	border-radius: 10px;
	padding: clamp(18px, 2vw, 26px) clamp(12px, 1.4vw, 18px);
	text-align: center;
	height: 100%;
}
.jen-tile .wp-block-image { margin: 0 0 .8em; }
.jen-tile img { width: 40px; height: 40px; margin-inline: auto; display: block; }
.jen-tile p { font-size: .88rem !important; line-height: 1.45; margin: 0; color: var(--jen-navy); }

/* A row of plain icons with hairline dividers (Resources / Contact) */
.jen-iconrow.wp-block-columns { gap: 0 !important; align-items: stretch; }
.jen-iconrow > .wp-block-column { text-align: center; padding: .4em clamp(10px, 1.6vw, 22px); }
.jen-iconrow > .wp-block-column + .wp-block-column { border-left: 1px solid var(--jen-rule); }
.jen-iconrow img { width: 46px; height: 46px; margin: 0 auto .7em; display: block; }
.jen-iconrow p { font-size: .9rem !important; line-height: 1.45; margin: 0; }

/* =========================================================
   CHECK LIST (Resources course panel)
   ========================================================= */

.jen-checks { list-style: none; margin: 0; padding: 0; }
.jen-checks li {
	position: relative;
	padding-left: 2.1em;
	margin-bottom: .85em;
	font-size: .98rem;
	line-height: 1.5;
	color: var(--jen-navy);
}
.jen-checks li::before {
	content: "\2713";
	position: absolute;
	left: 0; top: .05em;
	width: 1.45em; height: 1.45em;
	display: grid; place-items: center;
	background: var(--jen-orange);
	color: #fff;
	border-radius: 50%;
	font-size: .78em;
	font-weight: 700;
}

.jen-bullets { margin: 0; padding-left: 1.1em; }
.jen-bullets li { font-size: .92rem; line-height: 1.5; margin-bottom: .5em; }

/* =========================================================
   CONTACT DETAIL ROWS
   ========================================================= */

.jen-contactrow.wp-block-columns { gap: 1em !important; align-items: center; margin-block: 0 1.4em; }
.jen-contactrow > .wp-block-column:first-child { flex-basis: 56px !important; flex-grow: 0; }
.jen-contacticon {
	width: 52px; height: 52px;
	background: var(--jen-blue);
	border-radius: 50%;
	display: grid; place-items: center;
}
.jen-contacticon img { width: 24px; height: 24px; }
.jen-contactrow .jen-contactlabel {
	font-family: var(--jen-head) !important;
	font-size: 1.05rem !important;
	font-weight: 600;
	color: var(--jen-navy);
	margin: 0 0 .15em !important;
}
.jen-contactrow p:last-child { font-size: .9rem !important; margin: 0; color: var(--jen-body-soft); }

/* =========================================================
   QUOTE
   ========================================================= */

.jen-quote {
	background: var(--jen-blue);
	border-radius: 10px;
	padding: clamp(18px, 2.2vw, 26px);
}
.jen-quote p { font-style: italic; font-size: .95rem !important; line-height: 1.6; }
.jen-cite {
	font-style: normal !important;
	font-size: .74rem !important;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jen-body-soft);
	margin-top: .9em !important;
}

/* =========================================================
   CLOSING CTA BAND (image left, copy right, edge to edge)
   ========================================================= */

.jen-cta.wp-block-columns { gap: 0 !important; align-items: stretch; margin-block: 0; }
.jen-cta > .wp-block-column { margin: 0; align-self: stretch !important; }
.jen-cta .jen-cta-media { position: relative; min-height: 260px; overflow: hidden; }
.jen-cta .jen-cta-media .wp-block-image,
.jen-cta .jen-cta-media figure { height: 100%; margin: 0; }
.jen-cta .jen-cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jen-cta .jen-cta-copy {
	background: var(--jen-cream-soft);
	padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 60px);
	display: flex; flex-direction: column; justify-content: center;
}
.jen-cta .wp-block-buttons { margin-top: 1.4em; }

/* Price rows (Work With Jen) */
.jen-prices { border-top: 1px solid var(--jen-rule); margin-top: 1.2em; padding-top: 1em; }
.jen-prices .jen-eyebrow { margin-bottom: .7em !important; }
.jen-price {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	font-size: .9rem;
	line-height: 1.4;
	padding: .35em 0;
	color: var(--jen-body);
}
.jen-price span:last-child { font-weight: 700; color: var(--jen-navy); white-space: nowrap; }

/* Numbered badge on the Work With Jen cards */
.jen-badge {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--jen-head);
	font-weight: 700;
	font-size: .95rem;
	color: #fff;
	margin-bottom: .9em;
}
.jen-badge--1 { background: var(--jen-navy-mid); }
.jen-badge--2 { background: var(--jen-orange); }
.jen-badge--3 { background: var(--jen-navy-mid); }


/* Hero media that bleeds off the right edge (Work With Jen, Contact,
   Resources). Same geometry as .jen-portrait but a photo rather than a card. */
.jen-heromedia { border-radius: 14px 0 0 14px; overflow: hidden; }
.jen-heromedia .wp-block-image, .jen-heromedia figure { margin: 0; }
.jen-heromedia img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; object-position: center 35%; }

/* Bold intro line under an H1 */
.jen-subhead {
	font-family: var(--jen-head) !important;
	font-size: clamp(1.02rem, 1.4vw, 1.2rem) !important;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jen-navy);
	margin-bottom: .8em !important;
}

/* Badge is a paragraph block, so neutralise paragraph margins */
.jen-card > .jen-badge { margin: 0 0 .9em !important; }
.jen-prices .jen-price { margin: 0 !important; }
.jen-prices { margin-top: auto; }
.jen-card > .jen-prices + .wp-block-buttons { margin-top: 0; }


/* Contact: caption card floating over the hero photo */
.jen-heromedia--caption { position: relative; }
.jen-heromedia-card {
	position: absolute;
	right: clamp(14px, 2.4vw, 32px);
	bottom: clamp(14px, 2.4vw, 32px);
	max-width: 260px;
	background: rgba(255,255,255,.93);
	border-radius: 8px;
	padding: 1em 1.15em;
	margin: 0 !important;
	font-size: .92rem !important;
	line-height: 1.5;
	color: var(--jen-navy);
	box-shadow: 0 6px 20px rgba(1,47,105,.12);
}

/* Contact: the message form card */
.jen-formcard .wp-block-jetpack-contact-form { margin-top: 1.2em; }
.jen-formnote { font-size: .86rem !important; color: var(--jen-body-soft); margin-top: 1em !important; }
.jen-contactlabel a { color: var(--jen-navy); text-decoration: none; }
.jen-contactlabel a:hover { text-decoration: underline; }
.jen-sep.wp-block-separator { border: 0; border-top: 1px solid var(--jen-rule); margin: 1.6em 0; width: 100%; }
.jen-meetjen.wp-block-columns { gap: clamp(14px, 1.6vw, 20px) !important; margin-block: 0 1.2em; }
.jen-meetjen h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-bottom: .2em; }
.jen-meetjen p { font-size: .93rem; line-height: 1.5; }
.jen-avatar img { border-radius: 50%; width: 100%; height: auto; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(1,47,105,.12); }
.jen-avatar.wp-block-image { margin: 0; }

/* Jetpack form fields, scoped to this card. Element selectors do the work so
   a Jetpack class rename cannot strip the styling. */
.jen-formcard .jetpack-field__label,
.jen-formcard label {
	display: block;
	font-family: var(--jen-text);
	font-size: .82rem;
	font-weight: 600;
	color: var(--jen-navy);
	margin-bottom: .35em;
}
.jen-formcard input[type="text"],
.jen-formcard input[type="email"],
.jen-formcard input[type="tel"],
.jen-formcard textarea,
.jen-formcard select {
	width: 100% !important;
	box-sizing: border-box !important;
	font-family: var(--jen-text) !important;
	font-size: .95rem !important;
	line-height: 1.45 !important;
	color: var(--jen-body) !important;
	background: #fff !important;
	border: 1px solid var(--jen-rule) !important;
	border-radius: 7px !important;
	padding: .75em 1em !important;
	box-shadow: none !important;
}
.jen-formcard textarea { min-height: 128px; resize: vertical; }
.jen-formcard input:focus, .jen-formcard textarea:focus {
	outline: 0;
	border-color: var(--jen-orange) !important;
	box-shadow: 0 0 0 3px rgba(253,84,23,.16) !important;
}
.jen-formcard button[type="submit"],
.jen-formcard input[type="submit"],
.jen-formcard .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	gap: .5em;
	font-family: var(--jen-text) !important;
	font-size: .92rem !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var(--jen-orange) !important;
	border: 0 !important;
	border-radius: 7px !important;
	padding: .92em 1.6em !important;
	cursor: pointer;
}
.jen-formcard button[type="submit"]:hover,
.jen-formcard input[type="submit"]:hover { background: var(--jen-orange-dark) !important; }


/* Resources: free-download cards */
.jen-download-row.wp-block-columns { gap: clamp(14px, 1.6vw, 20px) !important; margin-block: 0; }
.jen-download-row > .wp-block-column { margin: 0; }
.jen-download img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 6px 18px rgba(1,47,105,.14); }
.jen-download .wp-block-image { margin: 0; }
.jen-download h3 { font-size: clamp(1.02rem, 1.4vw, 1.22rem); margin-bottom: .4em; }
.jen-download p { font-size: .94rem; line-height: 1.5; }
.jen-download .wp-block-buttons { margin-top: 1em; }

/* Resources: the Reflection Guide signup that moved over from Home */
.jen-guidesignup { margin-top: clamp(18px, 2vw, 26px); }
.jen-guidesignup h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.jen-guidesignup p { font-size: .95rem; }

/* Resources: the online-course panel */
.jen-courserow.wp-block-columns { gap: clamp(20px, 2.6vw, 36px) !important; align-items: center; }
.jen-coursecover img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 8px 22px rgba(1,47,105,.16); }
.jen-coursecover.wp-block-image { margin: 0; }
.jen-idealfor {
	background: rgba(255,255,255,.72);
	border: 1px solid var(--jen-rule);
	border-radius: 10px;
	padding: clamp(16px, 1.8vw, 22px);
}
.jen-idealfor .wp-block-buttons { margin-top: 1.1em; }

/* =========================================================
   PAGE TITLE / LAYOUT HOUSEKEEPING
   ========================================================= */

.wp-site-blocks:has(.jen) .wp-block-post-title { display: none; }
.wp-site-blocks main:has(.jen) { margin-bottom: 0 !important; }


/* =========================================================
   COURSE OVERRIDES
   The parent theme applies three things site-wide that fight this design.
   Measured on the live site, not guessed:
     h1..h6            { text-transform: uppercase }
     .wp-element-button{ text-transform: uppercase }
     --wp--style--block-gap: 2.5rem   (= 40px between every sibling block)
   The mockups are sentence case with spacing controlled per section, so all
   three are switched off inside .jen and nowhere else.
   ========================================================= */

.jen h1, .jen h2, .jen h3, .jen h4, .jen h5, .jen h6 {
	text-transform: none;
	letter-spacing: -.01em;
}

.jen .wp-block-button__link,
.jen .wp-element-button,
.jen button,
.jen input[type="submit"] {
	text-transform: none;
	letter-spacing: 0;
}

/* The eyebrow kickers and the step titles ARE uppercase by design — put it
   back after the blanket reset above. */
.jen .jen-eyebrow { text-transform: uppercase; letter-spacing: .16em; }
.jen .jen-eyebrow--navy { letter-spacing: .13em; }
.jen .jen-step-title { text-transform: uppercase; letter-spacing: .07em; }

/* Kill the 40px inter-block gap. Core writes it as margin-block-start on a
   per-container class, so zeroing the custom property alone is not enough —
   the structural blocks need it explicitly. Spacing inside .jen comes from
   section padding and the element margins defined above. */
.jen { --wp--style--block-gap: 0px; }
.jen > *,
.jen .wp-block-group,
.jen .wp-block-columns,
.jen .wp-block-column,
.jen .wp-block-buttons,
.jen .wp-block-image,
.jen .wp-block-spacer,
.jen .wp-block-list,
.jen .wp-block-separator { margin-block-start: 0 !important; }

/* Columns keep their own bottom margin from core; this design does not want it */
.jen .wp-block-columns { margin-block-end: 0; }
.jen-inner > .wp-block-columns + .wp-block-columns { margin-block-start: clamp(14px, 1.6vw, 20px) !important; }

/* Course sets overflow-wrap: break-word globally, which was snapping
   "communities" mid-word inside the narrow tiles. */
.jen-tile p, .jen-iconrow p, .jen-price, .jen-checks li, .jen-bullets li {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.jen-tile p { font-size: .84rem !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 781px) {
	.jen-iconrow > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--jen-rule); padding-block: 1.2em; }
	.jen-cta .jen-cta-media { min-height: 200px; max-height: 300px; }
	.jen-contactrow > .wp-block-column:first-child { flex-basis: 56px !important; }
	.jen-steps > .wp-block-column { clip-path: none; }
	.jen-hero.wp-block-columns { padding-left: var(--jen-pad); padding-right: var(--jen-pad); }
	.jen-hero .jen-portrait, .jen-heromedia { border-radius: 14px; }
	.jen-heromedia img { max-height: 300px; }
	.jen-portrait-row.wp-block-columns { align-items: flex-start; }
	.jen-portrait-row > .wp-block-column:first-child { max-width: 230px; min-height: 0; }
	.jen-portrait img { height: auto; }
}


/* =========================================================
   TYPE SCALE  (2026-10-23)
   Feedback: "headings still read like H1s, too big" — and the
   browser window is narrower than the 1440 I was testing at.
   The old clamps leaned on their vw term, so at 1000–1200px the
   headings stayed near their maximum while the column got narrower.
   These clamps cap lower and track width more gently.
   --jen-scale is the single knob: change that one number to move
   the whole scale up or down.
   ========================================================= */

.jen { --jen-scale: 1; }

.jen h1 {
	font-size: calc(clamp(1.72rem, 3.3vw, 2.5rem) * var(--jen-scale));
	line-height: 1.12;
}
.jen h2 {
	font-size: calc(clamp(1.28rem, 2.2vw, 1.75rem) * var(--jen-scale));
	line-height: 1.18;
	margin-bottom: .45em;
}
.jen h3 {
	font-size: calc(clamp(1.02rem, 1.4vw, 1.2rem) * var(--jen-scale));
	line-height: 1.25;
}
.jen-portrait h2 {
	font-size: calc(clamp(1.1rem, 1.45vw, 1.35rem) * var(--jen-scale));
	line-height: 1.2;
}
.jen .jen-lead,
.jen-hero .jen-lead { font-size: calc(1.02rem * var(--jen-scale)) !important; }

/* Buttons were sized for the uppercase treatment that is now off. */
.jen .jen-btn > .wp-block-button__link,
.jen .wp-block-button__link,
.jen .wp-element-button,
.jen button[type="submit"] {
	font-size: calc(.86rem * var(--jen-scale)) !important;
	padding: .72em 1.35em;
}
.jen-hero .wp-block-buttons { gap: .6rem !important; }

/* ---------------------------------------------------------
   CONTAINER
   Reverted 2026-10-23: I had briefly clamped this to the theme's
   1000px header container after misreading feedback. That made the
   bands narrower than the design. The mockup runs the content wide,
   so it goes back to 1320px with a fluid gutter - which means the
   bands are deliberately wider than the Course header above them.
   --------------------------------------------------------- */
.jen { --jen-max: 1320px; }
.jen-inner { padding-inline: clamp(20px, 3vw, 40px); }

/* =========================================================
   INSET BANDS ON WHITE  (2026-10-23)
   Feedback: the colour bands ran edge to edge; they want a
   gutter each side, on white instead of the theme's lavender.

   Measured first: the lavender is rgb(241,240,252) painted on
   <body>, and the Course header has no background of its own, so
   it reads lavender by inheritance. Turning body white therefore
   turns the header band white too - on the new pages only, since
   this is scoped by :has(.jen). The old .dyd pages keep lavender.

   The white bands (.jen-bg-white) stay full width: white on white,
   so insetting them would do nothing but complicate the markup.
   ========================================================= */

body:has(.jen) { background-color: var(--jen-white, #fff); }

.jen {
	--jen-edge: clamp(16px, 2.4vw, 32px);
	--jen-band-radius: 18px;
}

.jen .jen-bg-blue,
.jen .jen-bg-cream {
	width: calc(100% - 2 * var(--jen-edge));
	max-width: var(--jen-max);
	margin-inline: auto !important;
	margin-block: clamp(10px, 1.2vw, 18px) !important;
	border-radius: var(--jen-band-radius);
}

/* The inner container already carries its own gutter, so inside an
   inset band the text would sit twice as far in as it should. */
.jen .jen-bg-blue > .jen-inner,
.jen .jen-bg-cream > .jen-inner { padding-inline: clamp(14px, 2vw, 28px); }

/* =========================================================
   INSET THE HERO AND THE CLOSING CTA  (2026-10-23)
   Both were drawn to bleed off the page edge. Now that every
   colour band is inset on white, a bleed reads as a mistake
   rather than as a deliberate edge, so they join the grid.

   .jen-hero is the columns row on all four pages; .jen-cta is
   the closing photo+copy band on all four. One rule each.
   ========================================================= */

.jen .jen-hero.wp-block-columns,
.jen .jen-cta.wp-block-columns {
	width: calc(100% - 2 * var(--jen-edge));
	max-width: var(--jen-max);
	margin-inline: auto !important;
	padding-inline: 0;
}

/* The hero row carried the page gutter itself while it bled; now the
   row is inset, so only the copy column needs the band's inner gutter.
   Symmetric, because the columns stack on mobile. */
.jen .jen-hero > .wp-block-column:first-child { padding-inline: clamp(14px, 2vw, 28px); }

/* Inset on all sides now, so these round on all four corners
   rather than only the left pair, and their padding can be even. */
.jen .jen-hero .jen-portrait,
.jen .jen-heromedia { border-radius: var(--jen-band-radius); }
.jen .jen-hero .jen-portrait { padding: clamp(18px, 1.9vw, 26px); }

.jen .jen-cta.wp-block-columns {
	margin-block: clamp(10px, 1.2vw, 18px) !important;
	border-radius: var(--jen-band-radius);
	overflow: hidden;   /* clips the photo to the rounded corner */
}

/* =========================================================
   VERTICAL RHYTHM  (2026-10-24)
   "Too much dead space between the menubar and the content,
   then again between the sections."

   Measured against the Home mockup as a share of page width, so
   the comparison holds at any viewport:

                          mockup    was      now
     header -> panel       0.20%    7.00%    0.29%
     header -> H1          3.03%   13.21%    3.07%

   Three separate causes, not one:
     1. Course puts a 40px margin-top on <main>.
     2. The first band carried a full --jen-gap of top padding.
     3. Once the type came down, the portrait column was much
        taller than the copy beside it, so centring the columns
        pushed the H1 a long way down. In the mockup the two
        columns are near enough the same height (299 vs 290) that
        centring costs nothing.
   ========================================================= */

.wp-site-blocks main:has(.jen) { margin-top: 0 !important; }

/* Band padding: the mockup's bands breathe by about 2.4-2.8% of
   page width, not the 4.1% this was set to. */
.jen { --jen-gap: clamp(24px, 2.8vw, 40px); }

/* The first band sits straight under the header, as drawn. */
.jen > .jen-section:first-child { padding-top: 4px; }

/* The mockup's bands are flush. These are inset and rounded, so they
   need a little air to read as separate cards - but much less. */
.jen .jen-bg-blue,
.jen .jen-bg-cream,
.jen .jen-cta.wp-block-columns { margin-block: clamp(6px, .7vw, 10px) !important; }

.jen .jen-hero h1 { padding-top: 0; }

/* Keeps the portrait near the height of the copy beside it so the
   centred columns sit level. 22.6vw puts the H1 at 3.07% below the
   header against the mockup's 3.03%. */
.jen-portrait img { max-height: clamp(220px, 22.6vw, 340px); }
.jen-portrait-row > .wp-block-column:first-child { min-height: 0; }