/* ============================================================
   Say Your Grace — Copper Line

   Specificity layering, deliberately:
     (0,1,1)  .syg-cl h2             element reset — beats a theme's bare
                                     element rules (h2 {}, blockquote {}, a {})
     (0,2,0)  .syg-cl .syg-cl__h2    component rules — beat the reset above
                                     and a theme's own class rules

   The full-page template dequeues the theme stylesheet entirely; the
   [syg_copper_line] shortcode does not, which is what this layering is for.
   ============================================================ */

.syg-cl {
	/* Color */
	--syg-espresso:       #2A1608;
	--syg-espresso-deep:  #1E0F05;
	--syg-espresso-mid:   #41240F;
	--syg-gold:           #D9AE63;
	--syg-gold-deep:      #B08A3E;
	--syg-copper:         #A9763A;
	--syg-copper-light:   #8A5A22;
	--syg-copper-dark:    #7A5228;
	--syg-cream:          #F8EDDC;
	--syg-cream-page:     #FDF9F3;
	--syg-cream-warm:     #F5EADC;
	--syg-arch:           #F3E4CE;
	--syg-tan:            #E2CDAC;
	--syg-tan-muted:      #C4A986;
	--syg-tan-warm:       #E2D2B8;
	--syg-tan-line:       #E4D5C0;
	--syg-tan-rule:       #DFCDB3;
	--syg-tan-border:     #D2BA95;
	--syg-taupe-mid:      #7C6754;
	--syg-ink:            #5C4A36;
	--syg-alert:          #C0392B;
	--syg-alert-text:     #FFF3EC;

	/* Two contrast corrections to the approved palette, both for small text
	   only. The large copper headings keep the design value — their AA bar is
	   3:1 and they already pass.
	     --syg-taupe        was #8A7358 → 4.28:1 on cream (13px labels)
	     --syg-copper-label was #A9763A → 3.31:1 on cream (11–12px labels) */
	--syg-taupe:          #7E684C;
	--syg-copper-label:   #8A5D2B;

	--syg-gold-45:        rgba(217, 174, 99, .45);
	--syg-gold-60:        rgba(217, 174, 99, .6);
	--syg-gold-18:        rgba(217, 174, 99, .18);

	/* Type */
	--syg-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--syg-sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Layout */
	--syg-max:  1280px;
	/* Section backgrounds run edge to edge; this keeps the content column
	   itself at its designed 1120px, centred, by growing the side padding
	   on screens wider than --syg-max. At 1280 and below it resolves to a
	   flat 80px, so nothing about the approved layout changes. */
	--syg-pad:  max(80px, calc((100% - 1120px) / 2));
	--syg-head: 70px;

	font-family: var(--syg-sans);
	background: var(--syg-espresso);
	color: var(--syg-cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.syg-cl *,
.syg-cl *::before,
.syg-cl *::after { box-sizing: border-box; }

/* ── Element reset ────────────────────────────────────────────
   Kadence restyles headings, blockquote, button, and links hard enough to
   break the design when the shortcode renders inside a themed page. Every
   declaration here is re-stated by a component rule below, which outranks it. */
.syg-cl p,
.syg-cl h1,
.syg-cl h2,
.syg-cl h3,
.syg-cl h4,
.syg-cl figure,
.syg-cl figcaption,
.syg-cl blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-weight: 400;
	font-style: normal;
	quotes: none;
}
.syg-cl blockquote::before,
.syg-cl blockquote::after { content: none; }

.syg-cl img { max-width: 100%; display: block; }

/* The link states must be listed to beat a theme's own a:visited / a:hover
   rules, but each pseudo-class counts toward specificity — spelling them out
   would make this (0,2,1) and out-rank the component rules below. :where()
   contributes nothing, holding the whole thing at (0,1,1). */
.syg-cl a,
.syg-cl a:where(:link, :visited, :hover, :focus, :active) {
	text-decoration: none;
	color: inherit;
	box-shadow: none;
}

.syg-cl button,
.syg-cl input {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	text-transform: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.syg-cl button { cursor: pointer; }

.syg-cl .syg-cl__shell {
	max-width: none;
	margin: 0 auto;
	background: var(--syg-espresso);
}

/* Screen-reader-only, plus a skip link that becomes visible on focus */
.syg-cl .syg-cl__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.syg-cl .syg-cl__skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--syg-gold);
	color: var(--syg-espresso);
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.syg-cl .syg-cl__skip:focus { left: 12px; top: 12px; }

/* Focus visibility — the design file has none, and it needs it */
.syg-cl a:focus-visible,
.syg-cl button:focus-visible,
.syg-cl input:focus-visible {
	outline: 2px solid var(--syg-gold);
	outline-offset: 3px;
}

/* ── Reveal animation ─────────────────────────────────────── */
.syg-cl [data-rv],
.syg-cl [data-rvs] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
	transition-delay: var(--d, 0s);
}
.syg-cl [data-rvs] { transform: translateY(28px) scale(.985); }

.syg-cl [data-rv].rv-in,
.syg-cl [data-rvs].rv-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.syg-cl [data-rv],
	.syg-cl [data-rvs] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.syg-cl .syg-cl__drift { display: none; }
}

/* ── Header ───────────────────────────────────────────────── */
.syg-cl .syg-cl__header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--syg-head);
	padding: 0 44px;
	background: var(--syg-espresso-deep);
	border-bottom: 1px solid var(--syg-gold);
}

.syg-cl .syg-cl__wordmark {
	font-family: var(--syg-serif);
	/* Kept in step with .site-header .site-title in the Customizer CSS. At
	   25px the theme header's brand column grew wide enough to push EXIT NOW
	   onto a second row on inner pages; 22px fits both bars on one line. */
	font-size: 22px;
	line-height: 1;
	color: var(--syg-cream);
	white-space: nowrap;
}
.syg-cl .syg-cl__wordmark span { color: var(--syg-gold); }

.syg-cl .syg-cl__nav {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-left: auto;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--syg-tan-muted);
	white-space: nowrap;
}
.syg-cl .syg-cl__nav a { transition: color .25s ease; }
.syg-cl .syg-cl__nav a:hover { color: var(--syg-gold); }

.syg-cl .syg-cl__header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.syg-cl .syg-cl__exit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--syg-alert);
	color: var(--syg-alert-text);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .2s ease;
}
.syg-cl .syg-cl__exit:hover { background: #A52F22; }

/* Hamburger — hidden until the nav collapses */
.syg-cl .syg-cl__burger {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}
.syg-cl .syg-cl__burger-bars,
.syg-cl .syg-cl__burger-bars::before,
.syg-cl .syg-cl__burger-bars::after {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--syg-cream);
	transition: transform .3s ease, opacity .2s ease;
}
.syg-cl .syg-cl__burger-bars { position: relative; }
.syg-cl .syg-cl__burger-bars::before,
.syg-cl .syg-cl__burger-bars::after {
	content: '';
	position: absolute;
	left: 0;
}
.syg-cl .syg-cl__burger-bars::before { top: -7px; }
.syg-cl .syg-cl__burger-bars::after  { top: 7px; }

.syg-cl .syg-cl__burger[aria-expanded="true"] .syg-cl__burger-bars { background: transparent; }
.syg-cl .syg-cl__burger[aria-expanded="true"] .syg-cl__burger-bars::before { transform: translateY(7px) rotate(45deg); }
.syg-cl .syg-cl__burger[aria-expanded="true"] .syg-cl__burger-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────────── */
.syg-cl .syg-cl__hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--syg-espresso) 0%, #4A2A12 48%, var(--syg-copper-light) 100%);
}

.syg-cl .syg-cl__drift {
	position: absolute;
	top: -160px;
	right: 120px;
	width: 520px;
	height: 520px;
	border-radius: 999px;
	background: rgba(217, 174, 99, .14);
	pointer-events: none;
}
.syg-cl .syg-cl__drift--signup {
	top: -100px;
	right: -100px;
	width: 460px;
	height: 460px;
	background: rgba(217, 174, 99, .16);
}

.syg-cl .syg-cl__hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: end;
	min-height: 660px;
}

.syg-cl .syg-cl__hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 96px 0 96px var(--syg-pad);
}

.syg-cl .syg-cl__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--syg-gold);
}
.syg-cl .syg-cl__rule {
	flex: 0 0 auto;
	width: 46px;
	height: 1px;
	background: var(--syg-gold);
}

/* The four-line stack. The sizes and the 1px / 1px / 8px rhythm are the
   approved values — don't let a page builder normalize them to one
   line-height. */
.syg-cl .syg-cl__title {
	font-family: var(--syg-serif);
	font-weight: 700;
	font-size: 76px;
	line-height: .95;
	letter-spacing: -.02em;
	color: var(--syg-cream);
}
.syg-cl .syg-cl__title span {
	display: block;
	line-height: 1;
	white-space: nowrap;
}
.syg-cl .syg-cl__title-lg {
	color: var(--syg-gold);
	margin-top: 1px;
}
.syg-cl .syg-cl__title-sm { font-size: 38px; }
.syg-cl .syg-cl__title-sm--last { margin-top: 8px; }

.syg-cl .syg-cl__tagline {
	max-width: 520px;
	font-size: 21px;
	line-height: 1.5;
	letter-spacing: .01em;
	color: var(--syg-tan);
}
.syg-cl .syg-cl__lede {
	max-width: 530px;
	font-size: 18px;
	line-height: 1.75;
	color: var(--syg-tan-muted);
}

.syg-cl .syg-cl__hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.syg-cl .syg-cl__hero-portrait {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}
.syg-cl .syg-cl__arch {
	position: absolute;
	bottom: 0;
	width: 400px;
	/* Her hair starts about 15% down the portrait, which at this size
	   left roughly 190px of bare cream above her head. 66% brings the top
	   of the arch to about 25px above her hairline.

	   The cap matters: this column stretches to match the text column beside
	   it, so a longer welcome paragraph silently scales the arch up with it.
	   576px is what 66% measured before the copy grew; the cap holds the
	   oval at that size no matter how long the copy gets. */
	height: min(66%, 576px);
	border-radius: 999px 999px 0 0;
	/* A window, not a panel. The espresso wrapper sits between this arch and
	   the page background, so going transparent would only expose more brown.
	   Instead the arch paints the page's own cream and the same four circles
	   body::before draws; background-attachment: fixed anchors them to the
	   viewport exactly as that fixed layer does, so they line up with the
	   circles outside the arch and hold still while she scrolls past. */
	background-color: #F5EADC;
	background-image:
		radial-gradient(circle at 14% 20%, rgba(217, 174, 99, .18) 0, rgba(217, 174, 99, .18) 240px, transparent 241px),
		radial-gradient(circle at 86% 9%,  rgba(169, 118, 58, .11) 0, rgba(169, 118, 58, .11) 300px, transparent 301px),
		radial-gradient(circle at 81% 74%, rgba(217, 174, 99, .15) 0, rgba(217, 174, 99, .15) 360px, transparent 361px),
		radial-gradient(circle at 5% 88%,  rgba(169, 118, 58, .09) 0, rgba(169, 118, 58, .09) 210px, transparent 211px);
	background-attachment: fixed;
}
.syg-cl .syg-cl__hero-portrait img {
	position: relative;
	width: 440px;
	height: auto;
	object-fit: contain;
	/* Knocks the photo's white studio background out against the arch. If you
	   swap in a cutout PNG, delete this line. */
	mix-blend-mode: multiply;
}

/* ── Buttons ──────────────────────────────────────────────── */
.syg-cl .syg-cl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.syg-cl .syg-cl__btn--gold {
	padding: 18px 36px;
	background: var(--syg-gold);
	color: var(--syg-espresso);
	font-size: 16px;
	letter-spacing: .06em;
}
.syg-cl .syg-cl__btn--gold:hover { background: var(--syg-gold-deep); }

.syg-cl .syg-cl__btn--ghost {
	padding: 18px 32px;
	border: 1px solid var(--syg-gold-60);
	color: var(--syg-tan);
	font-size: 16px;
	letter-spacing: .06em;
}
.syg-cl .syg-cl__btn--ghost:hover {
	border-color: var(--syg-gold);
	color: var(--syg-gold);
}

.syg-cl .syg-cl__btn--outline-copper {
	padding: 15px 30px;
	border: 1px solid var(--syg-gold-deep);
	color: var(--syg-copper-dark);
	font-size: 15px;
	letter-spacing: .1em;
}
.syg-cl .syg-cl__btn--outline-copper:hover {
	background: var(--syg-gold-deep);
	color: var(--syg-cream);
}

.syg-cl .syg-cl__btn--outline-gold {
	padding: 12px 22px;
	border: 1px solid var(--syg-gold);
	color: var(--syg-gold);
	font-size: 13px;
	letter-spacing: .28em;
}
.syg-cl .syg-cl__btn--outline-gold:hover {
	background: var(--syg-gold);
	color: var(--syg-espresso);
}

.syg-cl .syg-cl__btn--espresso {
	flex: 0 0 auto;
	padding: 18px 38px;
	background: var(--syg-espresso);
	color: var(--syg-cream);
	font-size: 15px;
	letter-spacing: .14em;
	white-space: nowrap;
}
.syg-cl .syg-cl__btn--espresso:hover { background: var(--syg-espresso-mid); }

.syg-cl .syg-cl__btn--sm {
	padding: 13px 26px;
	font-size: 14px;
	letter-spacing: .12em;
}

/* ── Explore bar ──────────────────────────────────────────── */
.syg-cl .syg-cl__explore {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--syg-espresso-deep);
	border-top: 1px solid var(--syg-gold);
	border-bottom: 1px solid var(--syg-gold);
}
.syg-cl .syg-cl__explore-cell {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px 34px;
	border-right: 1px solid var(--syg-gold-18);
	transition: background .25s ease;
}
.syg-cl .syg-cl__explore-cell:last-child { border-right: 0; }
.syg-cl .syg-cl__explore-cell:hover { background: rgba(217, 174, 99, .07); }

.syg-cl .syg-cl__explore-glyph {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--syg-gold);
}
.syg-cl .syg-cl__explore-title {
	display: block;
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--syg-tan);
}
.syg-cl .syg-cl__explore-sub { display: none; }

/* ── Shared section furniture ─────────────────────────────── */
.syg-cl .syg-cl__section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.syg-cl .syg-cl__h2 {
	font-family: var(--syg-serif);
	font-weight: 700;
	line-height: 1.05;
}
.syg-cl .syg-cl__h2--cream    { font-size: 44px; color: var(--syg-cream); }
.syg-cl .syg-cl__h2--copper   { font-size: 54px; color: var(--syg-copper); }
.syg-cl .syg-cl__h2--espresso {
	font-size: 48px;
	color: var(--syg-espresso);
	margin-bottom: 30px;
}
.syg-cl .syg-cl__h2 em { font-style: italic; color: var(--syg-espresso); }
.syg-cl .syg-cl__h2--cream em { color: var(--syg-gold); }

.syg-cl .syg-cl__section-intro {
	max-width: 520px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--syg-ink);
}

.syg-cl .syg-cl__kicker {
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	font-weight: 400;
}
.syg-cl .syg-cl__kicker--copper {
	color: var(--syg-copper-label);
	margin-bottom: 18px;
}
.syg-cl .syg-cl__kicker--gold {
	color: var(--syg-gold);
	font-size: 11px;
	letter-spacing: .28em;
}
.syg-cl .syg-cl__kicker--wide {
	font-size: 18px;
	letter-spacing: .32em;
	margin-bottom: 22px;
	font-weight: 700;
}

/* ── My Story ─────────────────────────────────────────────── */
.syg-cl .syg-cl__story {
	padding: 100px var(--syg-pad);
	background: var(--syg-cream-page);
}
.syg-cl .syg-cl__story-grid {
	display: grid;
	grid-template-columns: .42fr .58fr;
	gap: 60px;
	align-items: center;
}
.syg-cl .syg-cl__story-h {
	font-family: var(--syg-serif);
	font-weight: 700;
	font-size: 60px;
	line-height: .98;
	color: var(--syg-espresso);
	margin: 0 0 20px;
}
.syg-cl .syg-cl__story-h em { font-style: italic; color: var(--syg-copper); }

.syg-cl .syg-cl__story-body {
	border-left: 1px solid var(--syg-tan-line);
	padding-left: 56px;
}
.syg-cl .syg-cl__story-lead {
	font-family: var(--syg-serif);
	font-size: 28px;
	line-height: 1.45;
	/* Darkened twice at the owner's request. Plain gold measured 1.97:1
	   on this cream, gold-deep 3.06:1; this copper is 3.75:1 and is the
	   same token as the big section headings. */
	color: var(--syg-copper);
	margin-bottom: 22px;
}
.syg-cl .syg-cl__story-text {
	font-size: 19px;
	line-height: 1.8;
	color: var(--syg-ink);
}

/* ── Latest video ─────────────────────────────────────────── */
.syg-cl .syg-cl__video {
	padding: 0 0 80px;
	background: var(--syg-espresso-deep);
}
.syg-cl .syg-cl__video .syg-cl__section-head { padding: 56px var(--syg-pad) 26px; }

.syg-cl .syg-cl__video-frame {
	position: relative;
	/* 16:9, the shape every YouTube still comes in, so the frame matches
	   the picture. A fixed height shaved the edges off it. */
	aspect-ratio: 16 / 9;
	margin: 0 var(--syg-pad);
	overflow: hidden;
}
.syg-cl .syg-cl__video-frame img,
.syg-cl .syg-cl__video-frame iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.syg-cl .syg-cl__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.syg-cl .syg-cl__play > span[aria-hidden] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 999px;
	background: rgba(250, 241, 230, .94);
	font-size: 30px;
	color: var(--syg-espresso);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
	transition: transform .3s ease;
}
.syg-cl .syg-cl__play:hover > span[aria-hidden] { transform: scale(1.07); }

/* ── Speaking ─────────────────────────────────────────────── */
.syg-cl .syg-cl__speaking {
	padding: 96px var(--syg-pad);
	background: var(--syg-cream-page);
}
.syg-cl .syg-cl__section-head--split { margin-bottom: 42px; }

.syg-cl .syg-cl__topics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--syg-tan-warm);
	border-left: 1px solid var(--syg-tan-warm);
}
.syg-cl .syg-cl__topic {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 34px 30px;
	border-bottom: 1px solid var(--syg-tan-warm);
	border-right: 1px solid var(--syg-tan-warm);
}
.syg-cl .syg-cl__dash {
	font-family: var(--syg-serif);
	font-size: 18px;
	color: var(--syg-gold-deep);
}
.syg-cl .syg-cl__topic-title {
	font-family: var(--syg-serif);
	/* A plain div in the design, so it stays regular weight even though the
	   markup promotes it to a heading for the document outline. */
	font-weight: 400;
	font-size: 26px;
	color: var(--syg-espresso);
	margin-bottom: 6px;
}
.syg-cl .syg-cl__topic-sub {
	/* Owner: bold and a step up from 16px. */
	font-size: 18px;
	font-weight: 700;
	color: var(--syg-gold);
}

.syg-cl .syg-cl__stats-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 56px;
	margin-top: 48px;
}
/* One row of four at desktop, as drawn — long labels wrap inside their own
   column rather than pushing a stat onto a second row. */
.syg-cl .syg-cl__stats {
	display: flex;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	gap: 44px;
	min-width: 0;
}
.syg-cl .syg-cl__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.syg-cl .syg-cl__stat-value {
	font-family: var(--syg-serif);
	font-size: 52px;
	line-height: 1;
	color: var(--syg-espresso);
	font-variant-numeric: tabular-nums;
}
.syg-cl .syg-cl__stat-label {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--syg-taupe);
}

/* ── Get Help ─────────────────────────────────────────────── */
.syg-cl .syg-cl__help {
	padding: 96px var(--syg-pad);
	background: var(--syg-espresso);
	color: #F6EBD9;
}
.syg-cl .syg-cl__help-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--syg-gold-45);
	border-bottom: 1px solid var(--syg-gold-45);
	border-left: 1px solid var(--syg-gold-45);
}
.syg-cl .syg-cl__help-cell {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 38px 28px;
	border-right: 1px solid var(--syg-gold-45);
	transition: background .25s ease;
}
.syg-cl .syg-cl__help-cell:hover { background: rgba(217, 174, 99, .08); }
.syg-cl .syg-cl__help-title {
	font-family: var(--syg-serif);
	font-size: 27px;
}
.syg-cl .syg-cl__help-body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--syg-tan-muted);
}
.syg-cl .syg-cl__help-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 34px;
}
.syg-cl .syg-cl__help-line {
	font-family: var(--syg-serif);
	font-style: italic;
	font-size: 26px;
	color: var(--syg-tan);
}

/* ── Blog + questionnaires ────────────────────────────────── */
.syg-cl .syg-cl__blog {
	padding: 96px var(--syg-pad);
	background: var(--syg-cream-warm);
}
.syg-cl .syg-cl__blog-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
}
.syg-cl .syg-cl__posts {
	display: flex;
	flex-direction: column;
}

.syg-cl .syg-cl__post { border-top: 1px solid var(--syg-tan-rule); }
.syg-cl .syg-cl__post-link,
.syg-cl .syg-cl__post > .syg-cl__post-thumb {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 26px;
	align-items: center;
	padding: 26px 0;
}
.syg-cl .syg-cl__post-link { transition: opacity .25s ease; }
.syg-cl .syg-cl__post-link:hover { opacity: .72; }

.syg-cl .syg-cl__post-thumb {
	/* Height follows the picture's own proportions -- the card grows to fit
	   the image instead of the image being cut to fit the card. */
	width: 160px;
	height: auto;
	object-fit: contain;
}
.syg-cl .syg-cl__post-thumb--empty {
	/* No image to size itself from, so this one keeps a fixed box. */
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E8D8C0;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #A08A6C;
}
.syg-cl .syg-cl__post-meta {
	display: block;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--syg-copper-label);
	margin-bottom: 8px;
}
.syg-cl .syg-cl__post-title {
	display: block;
	font-family: var(--syg-serif);
	font-size: 29px;
	line-height: 1.15;
	color: var(--syg-espresso);
	margin-bottom: 6px;
}
.syg-cl .syg-cl__post-excerpt {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	color: var(--syg-taupe-mid);
}

.syg-cl .syg-cl__quizzes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 40px;
}
.syg-cl .syg-cl__quiz {
	padding: 18px 22px;
	background: var(--syg-cream-page);
	border: 1px solid var(--syg-tan-line);
	font-family: var(--syg-serif);
	font-size: 21px;
	color: var(--syg-espresso);
	transition: background .25s ease, border-color .25s ease;
}
.syg-cl .syg-cl__quiz:hover {
	background: #FFF;
	border-color: var(--syg-gold-deep);
}

.syg-cl .syg-cl__share {
	padding: 34px 30px;
	background: var(--syg-espresso);
	color: var(--syg-cream);
}
.syg-cl .syg-cl__share .syg-cl__kicker { margin-bottom: 12px; }
.syg-cl .syg-cl__share-h {
	font-family: var(--syg-serif);
	font-size: 30px;
	line-height: 1.15;
	margin-bottom: 12px;
}
.syg-cl .syg-cl__share-body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--syg-tan-muted);
	margin-bottom: 20px;
}

/* ── Testimonials ─────────────────────────────────────────── */
.syg-cl .syg-cl__quotes {
	padding: 80px;
	background: var(--syg-cream-page);
}
.syg-cl .syg-cl__quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 2px solid var(--syg-tan-border);
	border-bottom: 2px solid var(--syg-tan-border);
	border-left: 2px solid var(--syg-tan-border);
}
.syg-cl .syg-cl__quote {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 38px 32px;
	border-right: 2px solid var(--syg-tan-border);
}
.syg-cl .syg-cl__stars {
	color: var(--syg-gold-deep);
	letter-spacing: .2em;
}
.syg-cl .syg-cl__quote blockquote {
	font-family: var(--syg-serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.45;
	color: var(--syg-espresso);
}
.syg-cl .syg-cl__quote figcaption {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--syg-taupe);
}

/* ── Grace Family signup ──────────────────────────────────── */
.syg-cl .syg-cl__signup {
	position: relative;
	overflow: hidden;
	padding: 110px var(--syg-pad);
	background: linear-gradient(120deg, var(--syg-copper-light) 0%, #4A2A12 55%, var(--syg-espresso) 100%);
	color: var(--syg-cream);
}
.syg-cl .syg-cl__signup-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.syg-cl .syg-cl__signup-h {
	font-family: var(--syg-serif);
	font-weight: 700;
	font-size: 62px;
	line-height: 1;
	margin-bottom: 14px;
	color: var(--syg-cream);
}
.syg-cl .syg-cl__signup-h em { font-style: italic; color: var(--syg-gold); }
.syg-cl .syg-cl__signup-body {
	max-width: 460px;
	font-size: 19px;
	line-height: 1.7;
	color: var(--syg-tan);
}
.syg-cl .syg-cl__signup-form form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.syg-cl .syg-cl__signup-form input[type="email"] {
	padding: 19px 24px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(248, 237, 220, .35);
	font-family: var(--syg-sans);
	font-size: 16px;
	color: var(--syg-cream);
}
/* Something later in the cascade (page-builder kit styles) sets a
   near-black placeholder that beats this rule without !important — it
   measured 1.59:1 against the copper gradient behind the field, i.e.
   effectively invisible. Cream at 80% measures 6.46:1 there and still
   reads as a placeholder rather than as entered text. opacity:1 is for
   Firefox, which dims placeholders by default. */
.syg-cl .syg-cl__signup-form input::placeholder {
	color: rgba(248, 237, 220, .8) !important;
	opacity: 1;
}
.syg-cl .syg-cl__signup-form button {
	padding: 19px 34px;
	font-size: 15px;
	letter-spacing: .16em;
}

/* ── Footer ───────────────────────────────────────────────── */
.syg-cl .syg-cl__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 52px var(--syg-pad) 52px 32px;
	background: var(--syg-espresso-deep);
	color: var(--syg-tan-muted);
	font-size: 14px;
	letter-spacing: .08em;
}
.syg-cl .syg-cl__wordmark--footer { font-size: 24px; }
.syg-cl .syg-cl__footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.syg-cl .syg-cl__footer-nav a:hover,
.syg-cl .syg-cl__footer-email:hover { color: var(--syg-gold); }

/* ============================================================
   Responsive. The design was drawn at 1440px only — everything
   below this line is new.
   ============================================================ */

@media (max-width: 1180px) {
	.syg-cl { --syg-pad: 52px; }

	.syg-cl .syg-cl__header { padding: 0 24px; }
	.syg-cl .syg-cl__nav {
		gap: 18px;
		font-size: 12px;
		letter-spacing: .12em;
	}

	.syg-cl .syg-cl__title    { font-size: 64px; }
	.syg-cl .syg-cl__title-sm { font-size: 32px; }
	.syg-cl .syg-cl__story-h  { font-size: 50px; }
	.syg-cl .syg-cl__signup-h { font-size: 52px; }
	.syg-cl .syg-cl__h2--copper   { font-size: 44px; }
	.syg-cl .syg-cl__h2--espresso { font-size: 40px; }
	.syg-cl .syg-cl__video-frame  { height: 460px; }
	.syg-cl .syg-cl__stats { gap: 32px; }
	.syg-cl .syg-cl__stat-value { font-size: 44px; }
}

/* Nav collapses to a drawer. EXIT NOW deliberately stays in the bar — the
   quick-exit control must never be the thing hidden behind a menu. */
@media (max-width: 980px) {
	.syg-cl .syg-cl__burger { display: inline-flex; }

	.syg-cl .syg-cl__nav {
		position: fixed;
		top: var(--syg-head);
		left: 0;
		right: 0;
		z-index: 49;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 8px 0 20px;
		background: var(--syg-espresso-deep);
		border-bottom: 1px solid var(--syg-gold);
		font-size: 15px;
		letter-spacing: .18em;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}
	.syg-cl .syg-cl__nav.is-open {
		transform: none;
		opacity: 1;
		visibility: visible;
	}
	.syg-cl .syg-cl__nav a {
		padding: 16px 24px;
		border-bottom: 1px solid var(--syg-gold-18);
	}

	.syg-cl .syg-cl__hero-grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.syg-cl .syg-cl__hero-copy { padding: 72px var(--syg-pad) 48px; }
	.syg-cl .syg-cl__hero-portrait { justify-content: center; }
	.syg-cl .syg-cl__arch { width: 320px; height: 88%; }
	.syg-cl .syg-cl__hero-portrait img { width: 340px; }

	.syg-cl .syg-cl__explore { flex-direction: column; }
	.syg-cl .syg-cl__explore-cell {
		border-right: 0;
		border-bottom: 1px solid var(--syg-gold-18);
		padding: 20px var(--syg-pad);
	}
	.syg-cl .syg-cl__explore-cell:last-child { border-bottom: 0; }

	.syg-cl .syg-cl__story-grid,
	.syg-cl .syg-cl__blog-grid,
	.syg-cl .syg-cl__signup-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.syg-cl .syg-cl__story-body {
		border-left: 0;
		border-top: 1px solid var(--syg-tan-line);
		padding-left: 0;
		padding-top: 32px;
	}

	.syg-cl .syg-cl__section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.syg-cl .syg-cl__help-grid {
		grid-template-columns: repeat(2, 1fr);
		border-right: 1px solid var(--syg-gold-45);
	}
	.syg-cl .syg-cl__help-cell:nth-child(-n+2) { border-bottom: 1px solid var(--syg-gold-45); }

	.syg-cl .syg-cl__quotes-grid {
		grid-template-columns: 1fr;
		border-right: 2px solid var(--syg-tan-border);
	}
	.syg-cl .syg-cl__quote {
		border-right: 0;
		border-bottom: 2px solid var(--syg-tan-border);
	}
	.syg-cl .syg-cl__quote:last-child { border-bottom: 0; }

	.syg-cl .syg-cl__stats-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}
	.syg-cl .syg-cl__stats { flex-wrap: wrap; gap: 32px 44px; }

	.syg-cl .syg-cl__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 44px var(--syg-pad);
	}
}

@media (max-width: 680px) {
	.syg-cl {
		--syg-pad: 22px;
		--syg-head: 62px;
	}

	.syg-cl .syg-cl__wordmark { font-size: 17px; }
	.syg-cl .syg-cl__exit {
		padding: 8px 12px;
		font-size: 10px;
		letter-spacing: .12em;
	}

	.syg-cl .syg-cl__title    { font-size: 46px; }
	.syg-cl .syg-cl__title-sm { font-size: 24px; }
	.syg-cl .syg-cl__title-sm--last { margin-top: 6px; }
	.syg-cl .syg-cl__tagline  { font-size: 18px; }
	.syg-cl .syg-cl__lede     { font-size: 16px; }

	.syg-cl .syg-cl__hero-copy {
		padding: 48px var(--syg-pad) 36px;
		gap: 18px;
	}
	.syg-cl .syg-cl__hero-ctas { width: 100%; }
	.syg-cl .syg-cl__btn--gold,
	.syg-cl .syg-cl__btn--ghost {
		flex: 1 1 100%;
		padding: 16px 20px;
		font-size: 14px;
	}

	.syg-cl .syg-cl__arch { width: 240px; }
	.syg-cl .syg-cl__hero-portrait img { width: 260px; }

	.syg-cl .syg-cl__story,
	.syg-cl .syg-cl__speaking,
	.syg-cl .syg-cl__help,
	.syg-cl .syg-cl__blog { padding: 64px var(--syg-pad); }
	.syg-cl .syg-cl__quotes { padding: 56px var(--syg-pad); }
	.syg-cl .syg-cl__signup { padding: 72px var(--syg-pad); }

	.syg-cl .syg-cl__story-h    { font-size: 38px; }
	.syg-cl .syg-cl__story-lead { font-size: 22px; }
	.syg-cl .syg-cl__story-text { font-size: 17px; }
	.syg-cl .syg-cl__signup-h   { font-size: 40px; }
	.syg-cl .syg-cl__h2--cream    { font-size: 32px; }
	.syg-cl .syg-cl__h2--copper   { font-size: 34px; }
	.syg-cl .syg-cl__h2--espresso { font-size: 32px; }

	.syg-cl .syg-cl__video-frame { height: auto; }
	.syg-cl .syg-cl__video .syg-cl__section-head { padding: 44px var(--syg-pad) 22px; }
	.syg-cl .syg-cl__play > span[aria-hidden] {
		width: 72px;
		height: 72px;
		font-size: 22px;
	}

	.syg-cl .syg-cl__topics,
	.syg-cl .syg-cl__help-grid { grid-template-columns: 1fr; }
	.syg-cl .syg-cl__topic { padding: 24px 20px; }
	.syg-cl .syg-cl__help-cell {
		padding: 28px 22px;
		border-bottom: 1px solid var(--syg-gold-45);
	}
	.syg-cl .syg-cl__help-cell:last-child { border-bottom: 0; }
	.syg-cl .syg-cl__help-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.syg-cl .syg-cl__help-line { font-size: 22px; }

	.syg-cl .syg-cl__stats { gap: 28px 40px; }
	.syg-cl .syg-cl__stat-value { font-size: 38px; }

	.syg-cl .syg-cl__post-link,
	.syg-cl .syg-cl__post > .syg-cl__post-thumb {
		grid-template-columns: 96px 1fr;
		gap: 16px;
	}
	.syg-cl .syg-cl__post-thumb { width: 96px; height: auto; }
	.syg-cl .syg-cl__post-title { font-size: 22px; }
	.syg-cl .syg-cl__post-excerpt { font-size: 15px; }

	.syg-cl .syg-cl__quiz { font-size: 18px; padding: 15px 18px; }
	.syg-cl .syg-cl__share-h { font-size: 24px; }
	.syg-cl .syg-cl__quote blockquote { font-size: 19px; }

	.syg-cl .syg-cl__drift { display: none; }
}

/* --- Mobile header overflow fix -------------------------------
 *    The wordmark was white-space:nowrap with no min-width:0, so it could
 *    not shrink and pushed EXIT NOW and the menu button off-screen below
 *    about 430px. The quick-exit control has to stay reachable at every
 *    width, so the wordmark is the element that yields.
 *    ------------------------------------------------------------- */
.syg-cl .syg-cl__wordmark { min-width: 0; }
.syg-cl .syg-cl__header-actions { flex: 0 0 auto; }
@media (max-width: 680px) {
	.syg-cl .syg-cl__header { gap: 12px; padding: 0 16px; }
	.syg-cl .syg-cl__wordmark { font-size: 15px; white-space: normal; line-height: 1.08; overflow-wrap: anywhere; }
	.syg-cl .syg-cl__header-actions { gap: 10px; }
	.syg-cl .syg-cl__exit { padding: 9px 12px; font-size: 10px; letter-spacing: .1em; gap: 6px; }
	.syg-cl .syg-cl__burger { width: 36px; height: 36px; }
}
@media (max-width: 400px) {
	.syg-cl .syg-cl__wordmark { font-size: 13px; }
	.syg-cl .syg-cl__exit { padding: 9px 10px; font-size: 9px; letter-spacing: .08em; }
}
/* Story heading accent set to the hero gold at the owner's direction.
 *    Measured: #D9AE63 on the cream panel is 1.97:1, under the 3:1 WCAG AA
 *    bar for large text. --syg-gold-deep (#B08A3E) is the nearest gold that
 *    clears it, at 3.06:1, if this ever needs revisiting. */
.syg-cl .syg-cl__story-h em { color: var(--syg-gold); }

/* --- Quick exit on non-landing pages -----------------------------
   The landing template has EXIT NOW inside its own header. Every other
   page gets this floating button instead, injected on wp_body_open, so
   the control exists on Get Help and every other page too. Pinned so it
   stays reachable however far down the page the visitor has scrolled,
   and padded to clear the mobile menu button.
   ---------------------------------------------------------------- */
.syg-cl.syg-cl--exit-only {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	/* Give the wrapper the height of the theme's bar and centre the
	   button inside it, instead of hanging it from the top of the
	   viewport — hung from the top it sat ~15px above the title and the
	   hamburger, which share a centre line at 40px. */
	display: flex;
	align-items: center;
	height: 80px;
	padding: 0 20px;
	background: none;
	line-height: 1;
}

body.admin-bar .syg-cl.syg-cl--exit-only { top: 32px; }

.syg-cl .syg-cl__exit--floating { box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }

@media (max-width: 1024px) {
	.syg-cl.syg-cl--exit-only { padding: 0 72px 0 14px; }
}

@media (max-width: 680px) {
	.syg-cl.syg-cl--exit-only { padding: 0 68px 0 12px; }
}

/* --- Exit button as a menu item ----------------------------------
   Sits as the last item in the theme menu so the theme lays it out
   with the other links instead of floating over them. Below the
   theme's collapse width the menu becomes a drawer, so the pinned
   version takes over there and this one is hidden.
   ---------------------------------------------------------------- */
.syg-cl.syg-cl--inline {
	display: inline-flex;
	background: none;
	color: inherit;
}

li.syg-cl-exit-item {
	display: flex;
	align-items: center;
	margin-left: 6px;
}

li.syg-cl-exit-item .syg-cl__exit { white-space: nowrap; }

/* Give the links room to breathe so the bar is not crushed to one side. */
.site-header .header-navigation li.menu-item > a { padding-left: 19px; padding-right: 19px; }

@media (min-width: 1025px) {
	.syg-cl.syg-cl--exit-only { display: none; }
}

@media (max-width: 1024px) {
	li.syg-cl-exit-item { display: none; }
}

/* Constrain the theme header to match the home page header proportions:
   a 1280px bar with the wordmark left and the links and exit button
   right. Without this the row runs wider than the home page and leaves a
   much bigger hole in the middle. */
.site-header .site-header-row {
	max-width: 1192px;
	margin-left: auto;
	margin-right: auto;
}


/* --- Videos page grid --------------------------------------------
   Cards in the Copper Line language: gold outline, Playfair title, the
   same circular play button as the home page. Newest first.
   ---------------------------------------------------------------- */
.syg-cl.syg-cl--videos {
	background: none;
	color: inherit;
}

.syg-cl .syg-cl__video-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 8px 0 4px;
}

.syg-cl .syg-cl__video-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--syg-gold-45);
	background: rgba(253, 249, 243, .62);
	transition: border-color .25s ease, transform .25s ease;
}
.syg-cl .syg-cl__video-card:hover {
	border-color: var(--syg-gold);
	transform: translateY(-3px);
}

.syg-cl .syg-cl__video-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--syg-espresso);
}
.syg-cl .syg-cl__video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.syg-cl .syg-cl__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: rgba(250, 241, 230, .94);
	color: var(--syg-espresso);
	font-size: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	transition: transform .25s ease;
}
.syg-cl .syg-cl__video-card:hover .syg-cl__video-play {
	transform: translate(-50%, -50%) scale(1.08);
}

.syg-cl .syg-cl__video-meta {
	font-family: var(--syg-sans);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--syg-copper-label);
}

.syg-cl .syg-cl__video-title {
	font-family: var(--syg-serif);
	font-size: 20px;
	line-height: 1.25;
	color: var(--syg-espresso);
}

.syg-cl-video-empty {
	font-family: var(--syg-sans);
	color: var(--syg-taupe-mid);
}

@media (max-width: 980px) {
	.syg-cl .syg-cl__video-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
	.syg-cl .syg-cl__video-grid { grid-template-columns: 1fr; gap: 20px; }
	.syg-cl .syg-cl__video-title { font-size: 18px; }
}

/* The feed caps at 15, so this sends people to the channel for the rest. */
.syg-cl .syg-cl__video-more {
	margin: 34px 0 4px;
	text-align: center;
}

/* --- Videos page, let the background circles read through --------
   The panel and the cards sit slightly translucent so the tan and the
   soft circles behind them stay visible. Kept light enough that the
   blended background is still near-cream, so the text contrast holds.
   :has() scopes this to the page carrying the grid; browsers without
   it simply keep the solid panel.
   ---------------------------------------------------------------- */
.content-bg:has(.syg-cl--videos),
.single-entry:has(.syg-cl--videos) {
	background: rgba(253, 249, 243, .74) !important;
}

.syg-cl .syg-cl__video-card:hover {
	background: rgba(253, 249, 243, .86);
}

/* --- Header dropdowns --------------------------------------------
   Nine destinations will not fit one row, so three sit under Real SOUL
   Talk and two under Shop. Get Help stays top level on purpose: on this
   site it should never be one hover away.
   ---------------------------------------------------------------- */
.syg-cl .syg-cl__nav-group {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.syg-cl .syg-cl__caret {
	font-size: 9px;
	margin-left: 3px;
	opacity: .8;
}

.syg-cl .syg-cl__submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	display: flex;
	flex-direction: column;
	min-width: 232px;
	padding: 6px 0;
	background: var(--syg-espresso-deep);
	border: 1px solid var(--syg-gold-45);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 60;
}

.syg-cl .syg-cl__nav-group:hover .syg-cl__submenu,
.syg-cl .syg-cl__nav-group:focus-within .syg-cl__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.syg-cl .syg-cl__submenu a {
	padding: 11px 20px;
	white-space: nowrap;
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--syg-tan);
}
.syg-cl .syg-cl__submenu a:hover { background: rgba(217, 174, 99, .12); color: var(--syg-gold); }

/* Six items rather than five need a touch more room. */
.syg-cl .syg-cl__nav { gap: 20px; font-size: 12px; letter-spacing: .14em; }

/* Heading above the four topic blocks. */
.syg-cl .syg-cl__topics-head {
	font-family: var(--syg-serif);
	font-weight: 700;
	font-size: 22px;
	color: var(--syg-espresso);
	margin: 0 0 20px;
}

/* Real Talk items now carry a second line. */
.syg-cl .syg-cl__quiz {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.syg-cl .syg-cl__quiz-title { display: block; }
.syg-cl .syg-cl__quiz-sub {
	display: block;
	font-family: var(--syg-sans);
	font-size: 13px;
	line-height: 1.45;
	font-style: italic;
	color: var(--syg-copper-label);
}

@media (max-width: 1180px) {
	/* This used to drop the landing nav to 11px, which made the home
	   menu a step smaller than every other page's between 1025px and
	   1180px. It now holds 12px/.14em like the rest of the site; the
	   tighter gap and header padding are what buy the room, otherwise
	   the wordmark truncates just above the collapse width. */
	.syg-cl .syg-cl__nav { gap: 10px; font-size: 12px; letter-spacing: .14em; }
}

@media (max-width: 980px) {
	.syg-cl .syg-cl__nav-group { display: block; width: 100%; }
	.syg-cl .syg-cl__submenu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: none;
		padding: 0;
	}
	.syg-cl .syg-cl__submenu a { padding-left: 44px; }
	.syg-cl .syg-cl__caret { display: none; }
}

/* --- Devotionals list ---------------------------------------------
   Same card language as the video grid: gold outline, Playfair title,
   copper date. Newest first; the page shows every one.
   ---------------------------------------------------------------- */
.syg-cl.syg-cl--devotionals { background: none; color: inherit; }

.syg-cl .syg-cl__dev-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 8px 0 4px;
}

.syg-cl .syg-cl__dev-card {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 26px;
	align-items: center;
	padding: 22px;
	border: 1px solid var(--syg-gold-45);
	background: rgba(253, 249, 243, .62);
	transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.syg-cl .syg-cl__dev-card:hover {
	border-color: var(--syg-gold);
	background: rgba(253, 249, 243, .86);
	transform: translateY(-2px);
}
.syg-cl .syg-cl__dev-card:not(:has(.syg-cl__dev-thumb)) { grid-template-columns: 1fr; }

.syg-cl .syg-cl__dev-thumb {
	/* Height follows the picture's own proportions -- the card grows to
	   fit the image rather than the image being cut to fit the card. */
	width: 168px;
	height: auto;
	object-fit: contain;
}

.syg-cl .syg-cl__dev-meta {
	display: block;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--syg-copper-label);
	margin-bottom: 8px;
}
.syg-cl .syg-cl__dev-title {
	display: block;
	font-family: var(--syg-serif);
	font-size: 27px;
	line-height: 1.2;
	color: var(--syg-espresso);
	margin-bottom: 8px;
}
.syg-cl .syg-cl__dev-excerpt {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	color: var(--syg-taupe-mid);
}

.content-bg:has(.syg-cl--devotionals),
.single-entry:has(.syg-cl--devotionals) { background: rgba(253, 249, 243, .74) !important; }

@media (max-width: 640px) {
	.syg-cl .syg-cl__dev-card { grid-template-columns: 1fr; gap: 14px; }
	.syg-cl .syg-cl__dev-thumb { width: 100%; height: 180px; }
	.syg-cl .syg-cl__dev-title { font-size: 22px; }
}

/* --- Hero: bridging circle ----------------------------------------
   The gold drift circle up top and the cream arch below read as two
   unrelated shapes with dead space between them. This third, lighter
   circle sits behind the arch and overlaps both, tying the group into
   one composition. Sized in % so it tracks the portrait column.
   ---------------------------------------------------------------- */
.syg-cl .syg-cl__hero-portrait::before {
	content: '';
	position: absolute;
	left: 4%;
	top: 13%;
	width: 92%;
	aspect-ratio: 1;
	border-radius: 999px;
	background: rgba(235, 216, 186, .20);
	pointer-events: none;
}

/* --- Footer: one centred stack -------------------------------------
   Previously the wordmark and nav were pushed to opposite edges, which
   left the footer looking lopsided. Both now sit centred on the page's
   centre line as a single stack: the wordmark on one line with the nav
   centred beneath it. With the full width to work in, all nine
   links need ~1033px against 1120px available, so they hold one row.
   The email address was removed at the owner's request.
   ------------------------------------------------------------------ */
.syg-cl .syg-cl__footer {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 56px var(--syg-pad);
	text-align: center;
}

.syg-cl .syg-cl__footer-nav {
	justify-content: center;
	gap: 10px;
}

/* --- Speaking heading: two stacked lines -------------------------
   "Survivor. Thriver." sits above a larger copper "CONQUEROR", and
   the pair is centred against the paragraph beside it rather than
   hanging off the left edge of its column.
   ---------------------------------------------------------------- */
.syg-cl .syg-cl__h2--stack {
	text-align: center;
	line-height: 1.04;
}

.syg-cl .syg-cl__h2--stack .syg-cl__h2-lead {
	display: block;
	color: var(--syg-espresso);
}

.syg-cl .syg-cl__h2--stack .syg-cl__h2-accent {
	display: block;
	color: var(--syg-copper);
	font-size: 1.42em;
	letter-spacing: .01em;
}

.syg-cl .syg-cl__section-head--split {
	align-items: center;
}

/* --- Book purchase card -------------------------------------------
   The Books page. The cover slot is a dashed placeholder until the
   real jacket art is uploaded — drop an <img> inside it and the image
   takes the slot over without any CSS change.
   ---------------------------------------------------------------- */
.syg-cl.syg-cl--book { background: none; color: inherit; }

.syg-cl .syg-cl__book {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 34px;
	align-items: center;
	padding: 30px;
	border: 1px solid var(--syg-gold-45);
	background: rgba(253, 249, 243, .72);
}

.syg-cl .syg-cl__book-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	padding: 10px;
	border: 1px dashed var(--syg-gold-60);
	background: rgba(217, 174, 99, .10);
	color: var(--syg-copper-label);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
}
.syg-cl .syg-cl__book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Once a real jacket is in the slot the dashed placeholder framing is
   wrong, so it becomes a plain hairline around the artwork. */
.syg-cl .syg-cl__book-cover:has(img) {
	padding: 0;
	border: 1px solid var(--syg-gold-45);
	background: none;
}

.syg-cl .syg-cl__book-kicker {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--syg-copper-label);
}

.syg-cl .syg-cl__book-title {
	margin: 0 0 6px;
	font-family: var(--syg-serif);
	font-size: 34px;
	line-height: 1.12;
	color: var(--syg-espresso);
}

.syg-cl .syg-cl__book-sub {
	margin: 0 0 16px;
	font-family: var(--syg-serif);
	font-style: italic;
	font-size: 19px;
	color: var(--syg-copper);
}

.syg-cl .syg-cl__book-blurb {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--syg-taupe-mid);
}
.syg-cl .syg-cl__book-blurb:last-of-type { margin-bottom: 24px; }

@media (max-width: 680px) {
	.syg-cl .syg-cl__book {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 22px;
	}
	.syg-cl .syg-cl__book-cover {
		max-width: 200px;
		margin: 0 auto;
	}
	.syg-cl .syg-cl__book-title { font-size: 27px; }
}

/* --- Full-bleed page ----------------------------------------------
   The shell used to stop at 1280px, so on a wide screen the site read
   as a column floating on the espresso behind it, with an 8px strip of
   the body's own background at each edge. The shell now fills the
   viewport and every section background goes edge to edge, while the
   content stays on the designed 1120px column via --syg-pad above.
   These four are the sections that size themselves rather than take
   that padding, so they get the cap explicitly.
   ---------------------------------------------------------------- */
body.page-template-syg-copper-line { margin: 0; }

.syg-cl .syg-cl__header {
	padding-left: max(44px, calc((100% - 1192px) / 2));
	padding-right: max(44px, calc((100% - 1192px) / 2));
}

.syg-cl .syg-cl__quotes {
	padding-left: var(--syg-pad);
	padding-right: var(--syg-pad);
}

.syg-cl .syg-cl__hero-grid {
	max-width: var(--syg-max);
	margin-left: auto;
	margin-right: auto;
}

/* The explore bar carries its own background and gold top rule, so
   capping its width left it floating as an island over the full-bleed
   hero. Pad it instead: the bar fills the viewport while the three
   links stay on the same 1280px they occupy at the design width. */
.syg-cl .syg-cl__explore {
	max-width: none;
	padding-left: max(0px, calc((100% - 1280px) / 2));
	padding-right: max(0px, calc((100% - 1280px) / 2));
}

/* --- Speaking gallery ---------------------------------------------
   Three conference photos above the topics list. The source images are
   all portrait but at different ratios (0.69 / 0.83 / 0.93), so the
   cells fix a common 4:5 and crop with object-fit. object-position is
   biased above centre because the faces sit high in every frame.
   ---------------------------------------------------------------- */
.syg-cl .syg-cl__speak-gallery {
	/* Flex rather than a fixed 3-column grid: the row now holds two
	   photos (the third floats into the opening copy) and flex keeps
	   them a sane size instead of stretching each to half the page. */
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 54px;
}

.syg-cl .syg-cl__speak-shot {
	flex: 1 1 260px;
	max-width: 360px;
	margin: 0;
	border: 1px solid var(--syg-gold-45);
	background: rgba(217, 174, 99, .08);
	overflow: hidden;
}

.syg-cl .syg-cl__speak-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 28%;
	transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
.syg-cl .syg-cl__speak-shot:hover img { transform: scale(1.03); }

@media (max-width: 980px) {
	.syg-cl .syg-cl__speak-gallery { gap: 14px; margin-bottom: 40px; }
}

@media (max-width: 680px) {
	.syg-cl .syg-cl__speak-gallery {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 34px;
	}
	.syg-cl .syg-cl__speak-shot img { aspect-ratio: 3 / 2; }
}

/* --- Speaking: the opening photo -----------------------------------
   The first conference shot floats into the opening copy rather than
   sitting in the row below. It carries .alignright too, so the mobile
   rule that un-floats aligned images applies to it as well.
   ---------------------------------------------------------------- */
.syg-cl__speak-float {
	width: 300px;
	max-width: 42%;
	margin: 4px 0 26px 34px;
	/* Literal gold, not var(--syg-gold-45): these figures sit in page
	   content outside any .syg-cl root, so the variable is undefined
	   there and the whole border declaration was being dropped. */
	border: 1px solid #D9AE63;
	background: rgba(217, 174, 99, .08);
}

.syg-cl__speak-float img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 680px) {
	.syg-cl__speak-float {
		width: 100%;
		max-width: 100%;
		margin: 0 0 22px;
	}
}

/* A floated photo near the end of a page can run past the last block;
   this makes the content box grow to contain it. */
.entry-content::after { /* speak-float clearfix */
	content: '';
	display: block;
	clear: both;
}

/* Shown whole. An earlier version cropped this to the top of the frame
   to hide the dark row of audience heads along the bottom; the owner
   does not want photos cut, so the full shot stands. */
.syg-cl__speak-float--crop img {
	aspect-ratio: auto;
	object-fit: fill;
}

/* Left-floated variant, so the three photos alternate down the page.
   Mirrors the right-float margins. */
.syg-cl__speak-float.alignleft {
	/* Wider than the right-hand pair: at 300px the last line of the
	   adjacent paragraph dropped under the photo. 380px makes the image
	   tall enough (408px) that all six lines sit beside it. */
	width: 380px;
	margin: 4px 34px 26px 0;
}

/* Belt and braces: the .syg-cl class carries the espresso page
   background, so any wrapper using it for the design variables must
   clear it or it paints a dark block behind partial rows. */
.syg-cl.syg-cl--speak-gallery-wrap {
	background: none;
	color: inherit;
}

@media (max-width: 1180px) {
	/* Must sit after the full-bleed header padding above, which would
	   otherwise win and leave the wordmark truncated at 12px nav. */
	.syg-cl .syg-cl__header {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* --- Site-wide footer ----------------------------------------------
   Inner pages used to end on the theme's own footer, complete with a
   "WordPress Theme by Kadence WP" credit link. The plugin now renders
   the Copper Line footer there instead, so the theme's is hidden. It
   only exists on non-landing pages, so no scoping is needed.
   ---------------------------------------------------------------- */
#colophon {
	display: none;
}

/* The wrapper only exists to carry the design variables — it must not
   paint the .syg-cl espresso behind the footer. */
.syg-cl.syg-cl--site-footer {
	background: none;
	color: inherit;
}

/* --- Home: one tier for the three lead words ----------------------
   Owner's call: "Rooted in Grace", "Devotionals" and "CONQUEROR" all
   read as one tier on the home page — sized to "Rooted in Grace" and
   coloured with the copper of "CONQUEROR".
   ---------------------------------------------------------------- */
.syg-cl .syg-cl__story-h em,
.syg-cl .syg-cl__h2--espresso,
.syg-cl .syg-cl__h2--stack .syg-cl__h2-accent {
	font-size: 50px;
	color: var(--syg-copper);
}

@media (max-width: 1180px) {
	.syg-cl .syg-cl__story-h em,
	.syg-cl .syg-cl__h2--espresso,
	.syg-cl .syg-cl__h2--stack .syg-cl__h2-accent { font-size: 36px; }
}

@media (max-width: 680px) {
	.syg-cl .syg-cl__story-h em,
	.syg-cl .syg-cl__h2--espresso,
	.syg-cl .syg-cl__h2--stack .syg-cl__h2-accent { font-size: 28px; }
}

/* --- Quick-exit button: let taps through the empty part --------------
   The floating Exit Now button sits inside a fixed 161x80 box pinned to the
   top-right corner, but the button itself is only about 81x27. The padding
   keeps the button clear of the theme's hamburger visually, yet the wrapper
   box still lay over it -- so on every page except the home page the menu
   could not be tapped, and once open the close X could not be either.
   Padding alone could never fix that; the empty area has to stop taking
   the taps.
   ------------------------------------------------------------------ */
.syg-cl.syg-cl--exit-only {
	pointer-events: none;
}
.syg-cl.syg-cl--exit-only .syg-cl__exit {
	pointer-events: auto;
}

/* --- Closed mobile menu must not catch taps -------------------------
   The closed nav is hidden with opacity:0 + visibility:hidden, but the
   mobile submenu rule sets visibility:visible on its own links to flatten
   the dropdown. visibility is inherited, so a child CAN override a hidden
   parent -- and opacity:0 hides pixels without disabling hit-testing. The
   result was five invisible, fixed-position links (Devotionals, Watch,
   Real Talk, Books, Sow & Glow) sitting across the upper third of every
   mobile page, hijacking taps and sending people to random pages.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
	.syg-cl .syg-cl__nav {
		pointer-events: none;
	}
	.syg-cl .syg-cl__nav.is-open {
		pointer-events: auto;
	}
	/* Follow the parent instead of forcing visible. */
	.syg-cl .syg-cl__submenu {
		visibility: inherit;
	}
}

/* --- Share Your Story form ------------------------------------------
   Deliberately plain and roomy. Someone writing this may be shaking; the
   story box is large so it never feels like there is a size limit on what
   she is allowed to say.
   ------------------------------------------------------------------ */
.syg-cl.syg-cl--storyform {
	/* The .syg-cl wrapper carries the espresso page background; on a cream
	   inner page that paints a dark slab behind the form. Same trap as the
	   devotionals wrapper, same fix. */
	background: none;
	color: inherit;
	margin: 34px 0 8px;
}

.syg-cl .syg-cl__storyform .syg-cl__field {
	display: block;
	margin: 0 0 22px;
}
.syg-cl .syg-cl__storyform label {
	display: block;
	margin-bottom: 7px;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #A9763A;
}
.syg-cl .syg-cl__storyform .syg-cl__opt {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: none;
	color: #6B6B6B;
}
.syg-cl .syg-cl__storyform textarea,
.syg-cl .syg-cl__storyform input[type='text'],
.syg-cl .syg-cl__storyform input[type='email'] {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #D9AE63;
	background: #FFFDFA;
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	color: #2D3748;
}
.syg-cl .syg-cl__storyform textarea { min-height: 240px; line-height: 1.6; resize: vertical; }
.syg-cl .syg-cl__storyform textarea:focus,
.syg-cl .syg-cl__storyform input:focus { outline: 2px solid #A9763A; outline-offset: 1px; }

.syg-cl .syg-cl__consent { border: 0; padding: 0; margin: 0 0 24px; }
.syg-cl .syg-cl__consent legend {
	padding: 0;
	margin-bottom: 9px;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #A9763A;
}
.syg-cl .syg-cl__consent label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 9px;
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #2D3748;
}
.syg-cl .syg-cl__consent input[type='radio'] {
	/* The theme sets appearance:none globally, which collapsed these to 0x0 --
	   invisible, so you could not see which option was chosen. Put the native
	   control back and give it a real size. */
	-webkit-appearance: radio;
	appearance: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: #A9763A;
}

/* Bot trap. Never shown, never announced to screen readers. */
.syg-cl .syg-cl__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.syg-cl .syg-cl__storyform .syg-cl__note {
	margin-top: 16px;
	font-size: 14px;
	color: #6B6B6B;
}
.syg-cl .syg-cl__story-thanks {
	padding: 26px 28px;
	border: 1px solid #D9AE63;
	background: rgba(253, 249, 243, .8);
	font-size: 19px;
	color: #2D3748;
}

@media (max-width: 680px) {
	.syg-cl .syg-cl__storyform textarea { min-height: 200px; }
}

/* --- Dropdown must not slide off-screen on narrow widths -------------
   The desktop dropdown centres itself under its parent with
   translateX(-50%). That hover/focus rule was never scoped to desktop, so
   at phone widths -- where the same submenu is position:static and the full
   width of the screen -- hovering or focusing an item shifted it half a
   screen to the left and the items disappeared off the edge. Touch counts
   too: :focus-within fires on tap.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
	.syg-cl .syg-cl__nav-group:hover .syg-cl__submenu,
	.syg-cl .syg-cl__nav-group:focus-within .syg-cl__submenu {
		transform: none;
	}
}
/* --- Thank-you page ------------------------------------------------
   Sits on the cream card, so it borrows the Share Your Story palette
   rather than the hero one -- the hero title colour is cream, which is
   invisible here. */
.syg-cl .syg-cl__thanks-h {
	font-family: var(--syg-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	color: var(--syg-espresso);
	margin: 34px 0 14px;
}

.syg-cl .syg-cl__thanks-list {
	margin: 0 0 32px;
	padding: 0 0 0 20px;
}

.syg-cl .syg-cl__thanks-list li {
	margin: 0 0 9px;
	font-size: 18px;
	line-height: 1.65;
	color: #2D3748;
}

.syg-cl .syg-cl__thanks-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	/* The list above used to supply the gap over the buttons. With that
	   section gone the buttons sat flush against the junk-folder box, so
	   the spacing lives here now instead of depending on a sibling. */
	margin: 30px 0 26px;
}

@media (max-width: 560px) {
	.syg-cl .syg-cl__thanks-ctas { display: block; }

	.syg-cl .syg-cl__thanks-ctas .syg-cl__btn {
		display: block;
		text-align: center;
		margin: 0 0 12px;
	}
}

/* --- Share Your Story heading ---------------------------------------
   The heading is theme-rendered page content, outside the .syg-cl
   wrapper, so it is scoped by page instead. Copper rather than plain
   gold: gold measures 1.97:1 on this cream and fails outright, while
   copper is 3.75:1 and clears the bar for heading-size text. */
.page-id-41 .entry-content h2.wp-block-heading,
.page-id-224 .entry-content h2.wp-block-heading {
	color: #A9763A;
}

/* --- Hero: fit the welcome copy and bring Nina into the first screen ---
   Scoped to the two-column layout only. Every property touched here has a
   980px override already, except the paragraph width -- widening that on a
   tablet would run the lines far too long, so the whole block is gated
   rather than set on the base rules.

   What each line is for:
   - the wider copy column means fewer lines, so the hero is shorter;
   - the copy column carried 96px of padding under the buttons, and that
     slack set the row height, so trimming it drops the buttons to just
     above the divider AND lifts the bottom-aligned portrait;
   - Nina and her arch are both a quarter larger. They scale together
     because the arch has always sat narrower than she is, and an arch
     wider than the woman inside it reads as a mistake. .85fr is the
     narrowest split that still holds her at full width -- at .75fr she
     was clipped to 480px and the arch overtook her. */
@media (min-width: 981px) {
	.syg-cl .syg-cl__hero-grid { grid-template-columns: 1.15fr .85fr; }

	.syg-cl .syg-cl__lede { max-width: none; }

	.syg-cl .syg-cl__hero-copy { padding-bottom: 20px; }

	.syg-cl .syg-cl__hero-portrait img { width: 550px; }

	.syg-cl .syg-cl__arch {
		width: 500px;
		height: min(66%, 720px);
	}

	/* Steps down from the two circles above onto the arch. Anchored from the
	   bottom because the arch is bottom-aligned -- the arch broke once
	   already by being tied to a height that moved when the copy changed.
	   On a ::before so nothing gains a z-index: the portrait knocks out its
	   white studio background with mix-blend-mode, and a stacking context on
	   any ancestor kills that blend and drops a pale rectangle behind her. */
	.syg-cl .syg-cl__hero::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: radial-gradient(circle 270px at calc(55.25% + 250px) calc(100% - 800px), rgba(235, 216, 186, .12) 0 99%, transparent 100%);
	}
}

/* --- Hero: portrait level with the title, buttons beneath her --------
   Replaces the bottom-aligned arrangement above. Values are derived, not
   pinned: the grid is capped at 1280 and takes no padding of its own (the
   80px inset comes from the copy column), the portrait column is 42.5% of
   it, and the image is 550 wide capping at the column width. Verified
   identical at 1000, 1200 and 1440. Gated to the two-column layout so the
   phone is untouched. */
@media (min-width: 981px) {
	.syg-cl .syg-cl__hero {
		--syg-gridw: min(1280px, 100vw);
		--syg-imgw: min(550px, calc(0.425 * var(--syg-gridw)));
		--syg-imgh: calc(var(--syg-imgw) * 1.3705);
		/* padding-top 96 + eyebrow 18 + flex gap 24 = the top of the h1 */
		--syg-title-top: 138px;
	}

	/* The buttons are out of flow now, so hold the hero open for them. */
	.syg-cl .syg-cl__hero-grid {
		min-height: calc(var(--syg-title-top) + var(--syg-imgh) + 140px);
	}

	/* Her top edge level with the top of the title. align-self:start
	   collapses the column to the image, so the arch keeps sitting on her
	   feet rather than on the row. */
	.syg-cl .syg-cl__hero-portrait {
		align-self: start;
		height: auto;
		margin-top: var(--syg-title-top);
	}

	/* The column is the image height now, so the earlier 66% cap would
	   shrink the arch. 96.6% is the proportion it had against her. */
	.syg-cl .syg-cl__arch {
		height: 96.6%;
		box-sizing: border-box;
		/* Deep gold rather than plain gold: on this cream, plain gold measures
		   1.97:1 and the line all but disappears. Deep gold is 3.06:1, so the
		   outline actually reads against her background. */
		border: 1px solid var(--syg-gold-deep);
	}

	.syg-cl .syg-cl__hero-ctas {
		position: absolute;
		left: 57.5%;
		width: 42.5%;
		top: calc(var(--syg-title-top) + var(--syg-imgh) + 36px);
		margin: 0;
		justify-content: center;
	}

	/* A circle under her behind both buttons, plus the one stepping down
	   from the circles above. 50% + 0.2875 of the grid is the portrait
	   column centre at every width. */
	.syg-cl .syg-cl__hero::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(circle 270px at calc(50% + 0.2875 * var(--syg-gridw)) calc(var(--syg-title-top) + var(--syg-imgh) + 66px), rgba(235, 216, 186, .12) 0 99%, transparent 100%),
			radial-gradient(circle 270px at calc(55.25% + 250px) calc(100% - 800px), rgba(235, 216, 186, .12) 0 99%, transparent 100%);
	}
}

/* --- Speaking page spacing -------------------------------------------
   The float offsets that centre the copy beside each photo live in the
   theme Additional CSS and were hand-tuned to the old photo heights. The
   group photo was replaced with a taller one, which threw all three out:
   the topics block sat 28px from the photo top and 126px from its bottom,
   and the closing block 80/106. The photos were also simply taller than
   the copy beside them, so the slack was dead space whatever the offset.

   These trim the photos so each one is closer to the height of its own
   copy, then re-centre what slack is left so it splits evenly instead of
   piling up underneath. Page height 2425 -> 2245 at 1440.

   body. prefix is deliberate: the Additional CSS is printed inline after
   this file, so equal specificity would lose. */
body.page-id-36 .syg-cl__speak-float.alignleft { width: 270px; }

body.page-id-36 .syg-cl__speak-float { width: 260px; }

/* The closing photo carries only three short lines beside it. */
body.page-id-36 .entry-content > figure.syg-cl__speak-float:last-of-type { width: 300px; }

body.page-id-36 .entry-content h2.syg-beside-float { margin-top: 70px; }

/* The closing photo now leads its block, so the copy wraps beside it from
   the heading down and needs no centring offset at all. */
body.page-id-36 .entry-content > p.syg-center-beside { margin-top: 0; }

body.page-id-36 .entry-content h2.syg-after-float { margin-top: 1.3em; }

@media (max-width: 680px) {
	/* Single column on a phone -- the photos go full width and none of the
	   centring offsets apply, so clear them all out. */
	body.page-id-36 .syg-cl__speak-float,
	body.page-id-36 .syg-cl__speak-float.alignleft,
	body.page-id-36 .entry-content > figure.syg-cl__speak-float:last-of-type {
		width: 100%;
	}

	body.page-id-36 .entry-content h2.syg-beside-float,
	body.page-id-36 .entry-content > p.syg-center-beside {
		margin-top: 36px;
	}
}

/* --- Confirmation page, desktop --------------------------------------
   Short page on a very wide card: everything was left-aligned across the
   full 1176px, so the junk-folder note sat marooned against the left edge
   of a box stretching most of the screen. Centred and held to 780px --
   wide enough that the note stays on one line instead of orphaning
   "junk." onto a second. Tested at 720 (orphans), 760, 800, 840.

   Desktop only: on a phone the card is already narrow and reads fine. */
@media (min-width: 981px) {
	body.page-id-241 .syg-cl.syg-cl--storyform {
		max-width: 780px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	body.page-id-241 .syg-cl__story-thanks {
		font-size: 22px;
		line-height: 1.55;
		text-align: center;
		padding: 30px 34px;
	}

	body.page-id-241 .syg-cl__thanks-ctas { justify-content: center; }
}

/* The note sat on rgba(253,249,243,.8), which is the card colour it is
   printed on -- so the box read as a hairline border round nothing. This
   tan is a shade under the page background, distinct from the card behind
   it without shouting. Body text on it measures 9.27:1.

   All widths, not just desktop: the box needs to read as a separate note
   on a phone too. Scoped to the confirmation page so the same class on
   Share Your Story is left alone. */
body.page-id-241 .syg-cl__story-thanks {
	background: #F0E0CC;
}

/* The eyebrow was 12px and nearly invisible. It cannot simply go up
   everywhere: at 375px the line already measures 293px inside 309px, so
   13px at the original .34em tracking wraps it onto two lines. Phone gets
   13px with the tracking eased to .24em to buy the room back; desktop has
   780px to play with and takes 14px at full tracking. */
body.page-id-241 .syg-cl__kicker {
	font-size: 13px;
	letter-spacing: .24em;
}

@media (min-width: 981px) {
	body.page-id-241 .syg-cl__kicker {
		font-size: 14px;
		letter-spacing: .34em;
	}
}

/* The tagline field is now empty (its line moved into the welcome copy),
   and the template prints the paragraph unconditionally -- so without this
   it leaves an empty <p> and a gap under the headline. */
.syg-cl .syg-cl__tagline:empty { display: none; }

/* Testimonial attributions can run to several lines (name, title,
   company). The template escapes the field, so a <br> would print as
   literal text -- real newlines plus pre-line is the way to get the breaks
   without touching the template. */
.syg-cl .syg-cl__quote figcaption { white-space: pre-line; }