/* ==================================================================
 * iTech Valet — THE CITY REPORT, COPY V1  (inc/city-report-v1.php)
 *
 * THEME-7, 2026-10-26, to the owner's approved boards
 * (city-report-v2-top.html, city-report-v2-bottom.html): their colours,
 * faces and sizes. Loaded on a v1 page only, after city-report.css,
 * which still dresses the slot board (THEME-6) and the breadcrumb pill
 * (THEME-8), both unchanged.
 *
 * SIZES     desktop  body 22, H2 Bebas 52, H1 80
 *           tablet   (1024 and under) body 20, H1 60
 *           phone    (600 and under) body 18, H1 40 centred, H2 30,
 *                    H3 24; stats two to a row; the row cards and the
 *                    method cards stack; tables scroll in their card
 *
 * EVERY RULE IS UNDER .cr1, the page's one wrapper, so (0,1,1) at least:
 * main.css's h1-h4 and p rules are (0,0,1).
 *
 * ASSET PATHS ARE ../../img/ - two levels.
 * ================================================================== */

.cr1 {
	--cr1-navy:   #0b2b5a;
	--cr1-ink:    #102a43;
	--cr1-text:   #2f4660;
	--cr1-muted:  #4a5d73;
	--cr1-faint:  #8a9bb0;
	--cr1-line:   #dbe4ee;
	--cr1-blue:   #2494e0;
	--cr1-orange: #e8730f;
	--cr1-amber:  #ffb347;
	--cr1-label:  #d9741a;
	--cr1-pale:   #dbeeff;
	--cr1-sky:    #8fd0ff;
	--cr1-green:  #22c55e;
	--cr1-green-deep: #16a34a;
	--cr1-body:   22px;

	color: var(--cr1-ink);
	font-family: var(--f-body);
}

/* The bar and an anchor jump: the heading lands clear of the bar. */
.cr1 [id] { scroll-margin-top: 96px; }


/* ==================================================================
 * 01 SECTIONS, GROUNDS, TYPE
 * ================================================================== */

.cr1 .cr1-sec {
	display: flex;
	justify-content: center;
	padding: 72px 40px;
}

.cr1 .cr1-in { width: 100%; max-width: 900px; }
.cr1 .cr1-in--wide { max-width: 1200px; }

.cr1-ground--white  { background: var(--c-white); }
.cr1-ground--lite   { background: #f3f7fb url("../../img/bg/home-white-grey.webp") center / cover no-repeat; }
.cr1-ground--warm   { background: linear-gradient(180deg, #fff7e8, #ffefd3); }
.cr1-ground--navy   { background: var(--cr1-navy); color: var(--c-white); }
.cr1-ground--blue,
.cr1 .cr1-hero      { background: #0b4a8f url("../../img/bg/avc-hero.webp") center / cover no-repeat; color: var(--c-white); }
.cr1-ground--record { background: #f3f7fb; }

.cr1 .cr1-h2 {
	margin: 0 0 22px;
	font-family: var(--f-display);
	font-size: 52px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.5px;
	color: var(--cr1-navy);
}

/* The Chewy word: the city in most headings, [T], "your", "one". */
.cr1 .cr1-c {
	font-family: var(--f-accent);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--cr1-orange);
}

/* A paragraph's colour is its ground's (--cr1-p), and a white card on a
   dark ground sets it back: a plain `.cr1-ground--blue p` would also
   reach the paragraphs inside the step cards and the slot board. */
.cr1 p,
.cr1 .cr1-list {
	margin: 0 0 20px;
	font-size: var(--cr1-body);
	line-height: 1.55;
	color: var(--cr1-p, var(--cr1-text));
}

.cr1 p b,
.cr1 .cr1-list b { color: var(--cr1-b, var(--cr1-navy)); }

.cr1-ground--navy { --cr1-p: #dbeeff; --cr1-b: var(--c-white); }
.cr1-ground--blue { --cr1-p: #e3f0ff; --cr1-b: var(--c-white); }
.cr1-card,
.cr1-step,
.cr1-slots { --cr1-p: var(--cr1-text); --cr1-b: var(--cr1-navy); }

.cr1-ground--navy .cr1-h2,
.cr1-ground--blue .cr1-h2 { color: var(--c-white); }
.cr1-ground--navy .cr1-c,
.cr1-ground--blue .cr1-c  { color: var(--cr1-amber); }

/* The site's pill button, the board's size. */
.cr1 .cr1-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 0 36px;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: 0.2px;
	text-transform: none;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.cr1 .cr1-cta { margin: 6px 0 0; }

.cr1 .cr1-punch {
	margin: 26px 0;
	padding: 22px 28px;
	border-left: 6px solid var(--cr1-orange);
	border-radius: 0 16px 16px 0;
	background: #fff4e3;
	font-family: var(--f-display);
	font-size: 40px;
	line-height: 1.05;
	color: var(--cr1-navy);
}

.cr1 .cr1-punch .cr1-n {
	font-family: var(--f-accent);
	font-size: 48px;
	color: var(--cr1-orange);
}

.cr1 .cr1-footnote {
	font-size: 13px;
	color: var(--cr1-faint);
}

.cr1 .cr1-label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--f-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cr1-label);
}


/* ==================================================================
 * 02 THE HERO (section 1) AND THE BREADCRUMB
 * ================================================================== */

.cr1 .cr1-hero {
	padding: 40px 40px 72px;
	text-align: center;
}

.cr1-hero__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 980px;
}

/* THE BREADCRUMB: city-report.css's pill (THEME-8), its words here. */
.cr1-hero .cr-crumbs {
	--link-ink:        var(--c-white);
	--link-ink-hover:  #ffb347;
	--link-rule:       none;
	--link-rule-hover: underline;
	margin-bottom: 8px;
}

.cr1-hero .cr-crumbs ol { justify-content: center; }
.cr1-hero .cr-crumbs li {
	display: inline-flex;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-white);
}
.cr1-hero .cr-crumbs a { color: var(--c-white); text-decoration: none; }
.cr1-hero .cr-crumbs a:hover { color: #ffb347; text-decoration: underline; }
.cr1-hero .cr-crumbs span { color: #ffb347; }

.cr1-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
}

.cr1 .cr1-eyebrow__line {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 2.5px;
	color: var(--cr1-sky);
}

.cr1 .cr1-eyebrow__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 12px 4px 9px;
	border-radius: 999px;
	background: var(--c-white);
	font-family: var(--f-display);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 2px;
	color: var(--cr1-muted);
}

.cr1 .cr1-eyebrow__pill.is-open { color: var(--cr1-green-deep); }

.cr1-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cr1-green);
}

@media (prefers-reduced-motion: no-preference) {
	.cr1-dot { animation: cr-slot-pulse 1.6s ease-out infinite; }
}

.cr1 .cr1-h1 {
	margin: 0;
	font-family: var(--f-display);
	font-size: 80px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.5px;
	color: var(--c-white);
}

.cr1 .cr1-h1 .cr1-c { color: var(--cr1-amber); }

/* Each sentence its own line, 22px between, as on the board. */
.cr1-h1__line { display: block; }
.cr1-h1__line + .cr1-h1__line { margin-top: 22px; }

.cr1 .cr1-hero__sub {
	max-width: 820px;
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.45;
	color: #e3f0ff;
}

.cr1-markets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr1-markets li {
	margin: 0;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--cr1-sky);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cr1-navy);
}

.cr1 .cr1-hero__close {
	margin: 0;
	font-family: var(--f-accent);
	font-size: 26px;
	line-height: 1.2;
	color: var(--cr1-amber);
}


/* ==================================================================
 * 03 THE STICKY BAR
 *
 * Fixed under the WordPress toolbar (when there is one) on a desktop,
 * at the foot of the screen on a phone. Out of view - and out of the tab
 * order, by visibility - until the script shows it.
 * ================================================================== */

.cr1-bar {
	position: fixed;
	z-index: 90;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 12px 40px;
	border-bottom: 3px solid var(--cr1-blue);
	background: var(--c-white);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	transform: translateY(-110%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.cr1-bar.is-shown {
	transform: none;
	visibility: visible;
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.cr1-bar,
	.cr1-bar.is-shown { transition: none; }
}

.cr1 .cr1-bar p { margin: 0; }

.cr1 .cr1-bar__title {
	font-family: var(--f-display);
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: var(--cr1-navy);
}

.cr1 .cr1-bar__line {
	font-size: 14px;
	line-height: 1.4;
	color: var(--cr1-muted);
}

.cr1 .cr1-bar__ask { display: none; }

.cr1 .cr1-btn--bar {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 24px;
	font-size: 16px;
}


/* ==================================================================
 * 04 THE BLOCKS
 * ================================================================== */

/* SECTION 2: five white cards, then the summary. */
.cr1-sec--numbers .cr1-h2 { text-align: center; }

.cr1-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.cr1-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 22px 10px 18px;
	border-radius: 16px;
	background: var(--c-white);
	box-shadow: 0 12px 28px rgba(16, 42, 67, 0.1);
	text-align: center;
}

.cr1-stat__n {
	font-family: var(--f-display);
	font-size: 72px;
	line-height: 0.9;
	color: var(--cr1-navy);
}

.cr1-stat--named .cr1-stat__n { color: var(--cr1-orange); }

.cr1-stat__l {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cr1-muted);
}

.cr1 .cr1-summary {
	padding: 22px 26px;
	border: 1px solid var(--cr1-line);
	border-radius: 14px;
	background: var(--c-white);
}

.cr1 .cr1-summary p:last-child { margin: 0; }

/* SECTION 3's questions: numbered blue pills. */
.cr1 .cr1-q {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.cr1 .cr1-q li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 22px 12px 14px;
	border: 1px solid var(--cr1-line);
	border-radius: 999px;
	background: var(--c-white);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cr1-navy);
}

.cr1-q__n {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cr1-blue);
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 1;
	color: var(--c-white);
}

/* The round market icon (section 4 and the markets table). */
.cr1-ico {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cr1-pale);
	vertical-align: middle;
}

.cr1-ico svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--cr1-navy);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cr1 .cr1-labeled--icon {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

/* SECTION 5: the row cards. */
.cr1-grade {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 6px 0 24px;
}

.cr1-grade__row {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	padding: 20px 24px;
	border-left: 6px solid var(--cr1-blue);
	border-radius: 16px;
	background: var(--c-white);
	box-shadow: 0 10px 24px rgba(16, 42, 67, 0.08);
}

.cr1 .cr1-grade__k {
	margin: 0;
	font-family: var(--f-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	color: var(--cr1-navy);
}

.cr1 .cr1-grade__st {
	margin: 6px 0 0;
	font-family: var(--f-accent);
	font-size: 26px;
	line-height: 1;
	color: var(--cr1-orange);
}

/* REPORTS-9: a second count (the specialist answers) under the first, smaller */
.cr1 .cr1-grade__st + .cr1-grade__st {
	margin-top: 10px;
	font-size: 20px;
}

.cr1 .cr1-grade__st small {
	display: block;
	margin-top: 2px;
	font-family: var(--f-body);
	font-size: 13px;
	line-height: 1.3;
	color: var(--cr1-muted);
}

.cr1 .cr1-grade__p {
	margin: 0;
	font-size: 20px;
}

/* SECTION 6: the ordered list. */
.cr1 .cr1-list { padding-left: 28px; }
.cr1 .cr1-list li { margin-bottom: 8px; }

/* SECTION 7: the four method cards, two by two. */
.cr1 .cr1-meth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 6px 0 22px;
	padding: 0;
	list-style: none;
}

.cr1-meth__c {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--c-white);
	box-shadow: 0 12px 28px rgba(16, 42, 67, 0.1);
}

.cr1-meth__num {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cr1-amber), #f28a1c);
	box-shadow: 0 6px 14px rgba(232, 115, 15, 0.35);
	font-family: var(--f-accent);
	font-size: 28px;
	line-height: 1;
	color: var(--c-white);
}

.cr1 .cr1-meth__h {
	margin: 0 0 8px;
	font-family: var(--f-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--cr1-navy);
}

.cr1 .cr1-meth__c p {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
}

/* SECTION 8, navy: centred. */
.cr1-sec--first_ask .cr1-in { text-align: center; }

/* SECTION 9: the three step cards, as on the board. */
.cr1 .cr1-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
	margin: 0 auto 18px;
	padding: 0;
	list-style: none;
}

.cr1-step {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0;
	padding: 22px 28px 24px 24px;
	border-radius: 6px 28px 6px 28px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

.cr1-step--1 { background: linear-gradient(135deg, var(--cr1-amber), #f28a1c); }
.cr1-step--2 { background: var(--c-white); }
.cr1-step--3 { background: var(--cr1-pale); }

.cr1-step__n {
	flex: 0 0 auto;
	width: 70px;
	font-family: var(--f-accent);
	font-size: 84px;
	line-height: 0.85;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.cr1-step--1 .cr1-step__n { color: var(--c-white); }
.cr1-step--2 .cr1-step__n { color: var(--cr1-blue); }
.cr1-step--3 .cr1-step__n { color: #0b4a8f; }

.cr1-step__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-top: 4px;
}

.cr1-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

.cr1 .cr1-step__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--cr1-navy);
}

.cr1 .cr1-step--1 .cr1-step__title { color: #1a1a1a; }

.cr1-step__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	color: var(--c-white);
}

/* FREE! - a navy stamp, tilted. */
.cr1-step--1 .cr1-step__tag {
	padding: 6px 18px 8px;
	border-radius: 6px;
	background: var(--cr1-navy);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
	font-family: var(--f-accent);
	font-size: 38px;
	letter-spacing: 1px;
	transform: rotate(-7deg);
}

/* 7-DAY HOLD - an orange ticket with a dashed edge. */
.cr1-step--2 .cr1-step__tag {
	padding: 7px 14px;
	border: 2px dashed rgba(255, 255, 255, 0.75);
	outline: 3px solid var(--cr1-orange);
	outline-offset: -1px;
	background: linear-gradient(90deg, #f7a21b, var(--cr1-orange));
	box-shadow: 0 6px 14px rgba(232, 115, 15, 0.4);
	font-family: var(--f-display);
	font-size: 20px;
	letter-spacing: 2px;
	transform: rotate(4deg);
}

/* Done for you - a navy-blue pill with a tick. */
.cr1-step--3 .cr1-step__tag {
	padding: 6px 16px 8px 12px;
	border-radius: 999px 4px 999px 4px;
	background: #0b4a8f;
	box-shadow: 0 6px 14px rgba(11, 74, 143, 0.4);
	font-family: var(--f-accent);
	font-size: 22px;
	transform: rotate(-3deg);
}

.cr1-step__tag svg { flex: 0 0 auto; width: 18px; height: 18px; }

.cr1 .cr1-step__body {
	margin: 0;
	font-size: 20px;
	line-height: 1.45;
	color: var(--cr1-text);
}

.cr1 .cr1-step--1 .cr1-step__body { color: #2b1d08; }

.cr1 .cr1-chewy-line {
	margin-top: 6px;
	font-family: var(--f-accent);
	font-size: 24px;
	text-align: center;
	color: var(--cr1-amber);
}

/* SECTION 10: centred - the figures, the money callout, the bold line. */
.cr1-sec--proof .cr1-in { text-align: center; }

.cr1-figures {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin: 0 0 22px;
}

.cr1-figure { display: flex; flex-direction: column; align-items: center; }

.cr1-figure__n {
	font-family: var(--f-display);
	font-size: 80px;
	line-height: 0.9;
	color: var(--cr1-muted);
}

.cr1-figure--after .cr1-figure__n { font-size: 96px; color: var(--cr1-orange); }

.cr1-figure__cap {
	font-size: 14px;
	font-weight: 600;
	color: var(--cr1-muted);
}

.cr1-figure__arrow {
	font-family: var(--f-accent);
	font-size: 40px;
	color: var(--cr1-orange);
}

.cr1-money {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 760px;
	margin: 10px auto 22px;
	padding: 26px 30px;
	border: 2px solid var(--cr1-green);
	border-radius: 20px;
	background: linear-gradient(135deg, #e9f9ee, #d3f3dc);
	box-shadow: 0 12px 28px rgba(34, 197, 94, 0.18);
	text-align: left;
}

.cr1-money__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--cr1-green-deep);
	box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
	color: var(--c-white);
}

.cr1-money__icon svg { width: 40px; height: 40px; }

.cr1 .cr1-money__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: 30px;
	line-height: 1.05;
	color: #166534;
}

.cr1 .cr1-money__words {
	margin: 6px 0 0;
	font-size: 20px;
	line-height: 1.5;
}

.cr1 .cr1-money__words b { color: var(--cr1-green-deep); }

/* SECTION 11, on the hero's artwork: the white card, the board, the line. */
.cr1-sec--market_lock .cr1-h2 { text-align: center; }

.cr1-sec--market_lock .cr1-in > p,
.cr1-sec--market_lock .cr1-in > .cr1-h2 + p {
	max-width: 860px;
	margin-inline: auto;
}

.cr1 .cr1-rule {
	max-width: 860px;
	margin: 6px auto 22px;
	padding: 26px 32px;
	border-radius: 18px;
	background: var(--c-white);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
	font-family: var(--f-display);
	font-size: 46px;
	line-height: 1;
	text-align: center;
	color: var(--cr1-navy);
}

.cr1 .cr1-rule .cr1-c { color: var(--cr1-orange); }

.cr1-slots { margin-top: 6px; }
.cr1 .cr1-slots .cr-slots { max-width: none; margin-bottom: 26px; }

.cr1 .cr1-booking { text-align: center; }

/* The tables: a real table in a white card, the navy header row, the
   counts in Bebas. The card scrolls sideways when the screen is
   narrower than the table; the page never does. */
/* position: relative keeps the em dash's screen-reader word (absolutely
   placed) inside the card's scroll box; without it, it escaped and
   widened the page on a phone, as on the hubs (a333eba). */
.cr1-table {
	position: relative;
	max-width: 100%;
	margin: 8px 0 10px;
	overflow-x: auto;
	border-radius: 14px;
	background: var(--c-white);
	box-shadow: 0 10px 24px rgba(16, 42, 67, 0.08);
}

.cr1-table:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; }

.cr1-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 18px;
}

.cr1-table caption {
	padding: 12px 16px;
	caption-side: bottom;
	font-size: 13px;
	text-align: left;
	color: var(--cr1-muted);
}

.cr1-table thead th {
	padding: 12px 16px;
	background: var(--cr1-navy);
	font-family: var(--f-display);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 1px;
	text-align: left;
	color: var(--c-white);
}

.cr1-table tbody th,
.cr1-table td {
	padding: 12px 16px;
	border-top: 1px solid #e6edf5;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	color: var(--cr1-text);
}

.cr1-table .cr1-table__n {
	font-family: var(--f-display);
	font-size: 26px;
	line-height: 1;
	text-align: center;
	color: var(--cr1-navy);
}

.cr1-table .cr1-table__market { white-space: nowrap; }
.cr1-table .cr1-ico { width: 32px; height: 32px; margin-right: 10px; }
.cr1-table .cr1-ico svg { width: 18px; height: 18px; }


/* ==================================================================
 * 05 SECTION 12  —  THE FORM (the screen after it is /thank-you/'s:
 *    thank-you-city.css, THEME-7B)
 * ================================================================== */

.cr1-ask {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	max-width: 1000px;
	margin-inline: auto;
}

.cr1-ask[hidden] { display: none; }

.cr1 .cr1-ask__small { font-size: 16px; }

.cr1-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 24px;
	border-radius: 18px;
	background: var(--c-white);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
	color: var(--cr1-ink);
}

.cr1 .cr1-card__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cr1-label);
}

.cr1-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cr1-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cr1-field[hidden] { display: none; }

.cr1-field__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cr1-field label {
	font-size: 13px;
	font-weight: 700;
	color: var(--cr1-ink);
}

.cr1-field input[type="text"],
.cr1-field input[type="email"] {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #c9d6e4;
	border-radius: 10px;
	background: #f7fafc;
	font: inherit;
	font-size: 16px;
	color: var(--cr1-ink);
}

.cr1-field input:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 1px; background: var(--c-white); }
.cr1-field input:disabled { opacity: 0.55; cursor: not-allowed; }
.cr1-field.is-invalid input { border-color: #c62828; }

.cr1 .cr1-field .cr1-check {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 400;
	color: var(--cr1-muted);
	cursor: pointer;
}

.cr1-check input { margin: 0; }

.cr1-field__error {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #c62828;
}

.cr1-focus {
	padding-top: 12px;
	border-top: 1px dashed #c9d6e4;
}

.cr1 .cr1-focus__label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cr1-muted);
}

.cr1-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cr1-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 2px solid #c9d6e4;
	border-radius: 999px;
	background: var(--c-white);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cr1-navy);
	cursor: pointer;
}

.cr1-pill__tick { display: none; }

.cr1-pill[aria-pressed="true"] {
	border-color: var(--cr1-blue);
	background: var(--cr1-pale);
}

.cr1-pill[aria-pressed="true"] .cr1-pill__tick { display: inline; }
.cr1-pill:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; }

/* The spam check is left in the page as the check page leaves it
   (lead-form.css): never clipped or squeezed shut, which Cloudflare may
   read as a hidden widget. With "interaction-only" it takes no room
   until it asks for a tick; then it gets a margin. */
.cr1-form__check.is-asking { margin: 0 0 4px; }

.cr1 .cr1-form__status {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fdecea;
	font-size: 14px;
	line-height: 1.45;
	color: #8e1c1c;
}

.cr1-form__status[hidden] { display: none; }

.cr1 .cr1-btn--submit {
	width: 100%;
	margin-top: 4px;
	cursor: pointer;
}

.cr1 .cr1-btn--submit:disabled { opacity: 0.7; cursor: progress; }

/* ==================================================================
 * 06 SECTION 13  —  THE BACK MATTER
 * ================================================================== */

.cr1 .cr1-sec--methodology { padding: 56px 40px 64px; }

.cr1-sec--methodology .cr1-in {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cr1 .cr1-record__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--cr1-label);
}

.cr1-record__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.cr1-aside {
	padding: 22px 26px;
	border: 1px solid var(--cr1-line);
	border-radius: 14px;
	background: var(--c-white);
}

.cr1 .cr1-aside p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.55;
}

.cr1 .cr1-aside p:last-child { margin-bottom: 0; }

.cr1 .cr1-record__h {
	margin: 0 0 10px;
	font-family: var(--f-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--cr1-navy);
}

.cr1-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cr1-row {
	border: 1px solid var(--cr1-line);
	border-radius: 12px;
	background: var(--c-white);
}

.cr1-row summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cr1-navy);
	list-style: none;
	cursor: pointer;
}

.cr1-row summary::-webkit-details-marker { display: none; }
.cr1-row summary:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; border-radius: 12px; }

/* The board's blue + ; a minus once open. */
.cr1-row__sign {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.cr1-row__sign::before,
.cr1-row__sign::after {
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--cr1-blue);
	content: "";
}

.cr1-row__sign::after { transform: rotate(90deg); }
.cr1-row[open] .cr1-row__sign::after { display: none; }

.cr1-row__body {
	padding: 0 18px 16px;
	border-top: 1px solid #e6edf5;
}

.cr1 .cr1-row__body p {
	margin: 12px 0 0;
	font-size: 16px;
}

.cr1-answer { padding-top: 14px; }

.cr1 .cr1-answer__engine {
	margin: 0 0 6px;
	font-family: var(--f-display);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--cr1-navy);
}

.cr1-answer__text {
	max-height: 420px;
	overflow-y: auto;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f7fafc;
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-line;
	overflow-wrap: anywhere;
	color: var(--cr1-text);
}

.cr1 .cr1-record__note,
.cr1 .cr1-record__foot {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--cr1-faint);
}

.cr1 .cr1-record__foot a { color: var(--cr1-muted); text-decoration: underline; }


/* ==================================================================
 * 07 TABLET  —  1024 and under: body 20, H1 60
 * ================================================================== */

@media (max-width: 1024px) {
	.cr1 { --cr1-body: 20px; }
	.cr1 .cr1-h1 { font-size: 60px; }
	.cr1 .cr1-hero__sub { font-size: 20px; }
	.cr1 .cr1-h2 { font-size: 46px; }
	.cr1-stat__n { font-size: 60px; }
	.cr1-bar { gap: 20px; padding-inline: 24px; }
	.cr1 .cr1-bar__line { display: none; }
	.cr1-ask { gap: 32px; }
}

@media (max-width: 860px) {
	.cr1-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cr1-ask { grid-template-columns: minmax(0, 1fr); }
	.cr1-record__pair { grid-template-columns: minmax(0, 1fr); }
}


/* ==================================================================
 * 08 PHONE  —  600 and under
 *
 * Body 18, H1 40 centred, H2 30, H3 24. Stats two to a row (the fifth
 * across the foot). Row cards: the label over the words. Method cards
 * one above another. The tables scroll in their card. The bar at the
 * foot of the screen: the one question and the button.
 * ================================================================== */

@media (max-width: 600px) {
	.cr1 { --cr1-body: 18px; }
	.cr1 [id] { scroll-margin-top: 16px; }

	.cr1 .cr1-sec { padding: 48px 16px; }
	.cr1 .cr1-hero { padding: 24px 16px 48px; }
	.cr1-hero__in { gap: 18px; }

	.cr1 .cr1-h1 { font-size: 40px; text-align: center; }
	.cr1-h1__line + .cr1-h1__line { margin-top: 14px; }
	.cr1 .cr1-hero__sub { font-size: 18px; }
	.cr1-markets li { padding: 8px 16px; font-size: 15px; }
	.cr1 .cr1-hero__close { font-size: 22px; }
	.cr1 .cr1-eyebrow__line { font-size: 12px; letter-spacing: 2px; }

	.cr1 .cr1-h2 { margin-bottom: 18px; font-size: 30px; line-height: 1; }

	.cr1 .cr1-grade__k,
	.cr1 .cr1-meth__h,
	.cr1 .cr1-step__title,
	.cr1 .cr1-record__h { font-size: 24px; }

	.cr1 .cr1-punch { padding: 18px 20px; font-size: 30px; }
	.cr1 .cr1-punch .cr1-n { font-size: 36px; }

	.cr1-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cr1-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.cr1-stat__n { font-size: 56px; }
	.cr1-stat__l { font-size: 14px; }

	.cr1 .cr1-summary { padding: 18px 18px; }

	.cr1 .cr1-q li { padding: 10px 16px 10px 10px; font-size: 17px; border-radius: 22px; }

	.cr1-grade__row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
	.cr1 .cr1-grade__p { font-size: 17px; }

	.cr1 .cr1-meth { grid-template-columns: minmax(0, 1fr); }
	.cr1-meth__c { padding: 18px; gap: 14px; }
	.cr1 .cr1-meth__c p { font-size: 17px; }

	.cr1-step { gap: 14px; padding: 18px 18px 20px 16px; }
	.cr1-step__n { width: 44px; font-size: 60px; }
	.cr1 .cr1-step__body { font-size: 17px; }
	.cr1-step--1 .cr1-step__tag { font-size: 30px; }

	.cr1-figures { gap: 18px; }
	.cr1-figure__n { font-size: 56px; }
	.cr1-figure--after .cr1-figure__n { font-size: 66px; }
	.cr1-figure__cap { font-size: 12px; max-width: 9em; }

	.cr1-money { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
	.cr1-money__icon { width: 56px; height: 56px; }
	.cr1-money__icon svg { width: 30px; height: 30px; }
	.cr1 .cr1-money__title { font-size: 26px; }
	.cr1 .cr1-money__words { font-size: 17px; }

	.cr1 .cr1-rule { padding: 20px; font-size: 32px; }

	/* A table keeps its width and scrolls inside its card. */
	.cr1-table table { min-width: 560px; font-size: 16px; }
	.cr1-table .cr1-table__n { font-size: 22px; }

	.cr1-card { padding: 22px 18px 20px; }
	.cr1 .cr1-btn { min-height: 54px; padding: 0 22px; font-size: 17px; }


	.cr1 .cr1-sec--methodology { padding: 40px 16px 48px; }
	.cr1-aside { padding: 18px; }
	.cr1-row summary { padding: 12px 14px; font-size: 15px; }
	.cr1-row__body { padding: 0 12px 14px; }

	/* THE BAR, AT THE FOOT. One line and the button. */
	.cr1-bar {
		top: auto;
		bottom: 0;
		gap: 10px;
		justify-content: space-between;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 3px solid var(--cr1-blue);
		border-bottom: 0;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.14);
		transform: translateY(110%);
	}

	.cr1 .cr1-bar__title,
	.cr1 .cr1-bar__line { display: none; }

	.cr1 .cr1-bar__ask {
		display: block;
		min-width: 0;
		font-family: var(--f-display);
		font-size: 22px;
		line-height: 1.05;
		color: var(--cr1-navy);
	}

	.cr1 .cr1-btn--bar { min-height: 44px; padding: 0 16px; font-size: 14px; }

	/* Room under the footer for the bar. */
	.cr1-page .site-footer { padding-bottom: 72px; }
}

/* No bar title on a phone: with no question sent, the bar still says what it is. */
@media (max-width: 600px) {
	.cr1-bar:not(:has(.cr1-bar__ask)) .cr1-bar__title { display: block; font-size: 20px; }
}