/* CGG Home Options Calculator / Foreclosure support — page styles (1.2.0, visual and media revision).
   Uses the cgg-law theme tokens (six colors, rem spacing, type scale) loaded by the theme's core
   stylesheet on every page. Square corners, hairlines, no new hues, no raster images, no remote
   assets, no sticky or fixed elements of its own, no animation. The only artwork is decorative
   inline SVG drawn from the theme's own still-life motifs (includes/media.php), sized here so it
   reserves its space before paint and never moves the calculator down. */

/* No remote fonts on these pages: the plugin replaces the theme's Google Fonts stylesheet with an
   empty alias and the brand families resolve to a locally available stack (Avenir Next / Avenir on
   Apple devices, then the system fonts), as on the theme's own private page. */
body.cgg-hoc-page {
	--cgg-sans: "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cgg-accent: "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cgg-hoc-control-h: 2.75rem;
}

.cgg-hoc__wrap { max-width: 74rem; }

/* ---- Compact page head: the calculator must be reachable within the first viewport ---- */
.cgg-hoc.cgg-sec { padding-block: var(--cgg-s5) var(--cgg-sec); }
.cgg-hoc__head { max-width: none; padding-block: var(--cgg-s4) var(--cgg-s4); border-bottom: 1px solid var(--cgg-ink); margin-bottom: var(--cgg-s4); }
.cgg-hoc__head .cgg-eyebrow { margin-bottom: var(--cgg-s2); }
.cgg-hoc__head .cgg-entry-title { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; max-width: 32ch; }
.cgg-hoc__lead { max-width: 56rem; margin-top: var(--cgg-s3); font-size: var(--cgg-fs-body); line-height: 1.5; }
.cgg-hoc__head--art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: var(--cgg-s4) var(--cgg-s7); align-items: stretch; }
.cgg-hoc__head-text { min-width: 0; align-self: center; }

/* ---- Decorative artwork: aria-hidden inline SVG that fills its box (cropped, never stretched) ---- */
.cgg-hoc-art { position: relative; overflow: hidden; min-width: 0; background: var(--cgg-limestone); }
.cgg-hoc-art__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.cgg-hoc-art--head { min-height: 9rem; }
.cgg-hoc-art--card { aspect-ratio: 16 / 7; margin: 0 calc(-1 * var(--cgg-s5)) var(--cgg-s2); }

/* ---- Urgent-deadline notice ---- */
.cgg-hoc-urgent {
	max-width: 64rem;
	margin: 0 0 var(--cgg-s4);
	padding: var(--cgg-s3) var(--cgg-s4);
	border-left: .25rem solid var(--cgg-plum);
	background: var(--cgg-limestone);
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.45;
}

/* ---- Notice row: the urgent notice with, beside it on wide screens, the paths link; on narrow or zoomed
   layouts the Start button appears under the notice because the first control is not in view ---- */
.cgg-hoc-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--cgg-s3) var(--cgg-s5); margin: 0 0 var(--cgg-s4); }
.cgg-hoc-top .cgg-hoc-urgent { flex: 1 1 36rem; margin: 0; }
.cgg-hoc-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cgg-s3) var(--cgg-s5); }
.cgg-hoc-start__alt { display: inline-flex; align-items: center; min-height: 2rem; font-weight: 500; color: var(--cgg-plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cgg-hoc-start__alt:hover { color: var(--cgg-deep); text-decoration-color: transparent; }
@media (min-width: 900px) {
	.cgg-hoc-start__btn { display: none; }
	.cgg-hoc-start { flex: 0 1 auto; }
}
@media (max-width: 899.98px) {
	.cgg-hoc-top { display: block; }
	.cgg-hoc-top .cgg-hoc-urgent { margin: 0 0 var(--cgg-s3); font-size: .875rem; }
	.cgg-hoc-start__alt { min-height: var(--cgg-hoc-control-h); }
	.cgg-hoc__lead { font-size: .9375rem; }
}

/* ---- Generic section rhythm ---- */
.cgg-hoc-section { max-width: 44rem; padding-top: var(--cgg-s6); border-top: 1px solid var(--cgg-ink); margin: 0 0 var(--cgg-s8); }
.cgg-hoc-section__h { margin: 0 0 var(--cgg-s4); }
.cgg-hoc-section .cgg-eyebrow + .cgg-hoc-section__h { margin-top: 0; }
.cgg-hoc-section p + p, .cgg-hoc-section p + ul, .cgg-hoc-section ul + p { margin-top: var(--cgg-s4); }
.cgg-hoc-fine { margin-top: var(--cgg-s5); font-size: var(--cgg-fs-small); line-height: 1.55; color: var(--cgg-ink-72); }
.cgg-hoc-ownpage { margin: 0 0 var(--cgg-s7); }
.cgg-hoc-note {
	max-width: 44rem;
	margin: 0 0 var(--cgg-s7);
	padding: var(--cgg-s1) 0 var(--cgg-s1) var(--cgg-s4);
	border-left: 2px solid var(--cgg-plum);
	line-height: 1.55;
}
.cgg-hoc-note strong { font-weight: 600; }

/* ---- The tool ---- */
.cgg-hoc-tool { margin: 0 0 var(--cgg-s6); }
.cgg-hoc-tool__head { max-width: 64rem; margin-bottom: var(--cgg-s3); }
.cgg-hoc-tool__h { margin: 0; font-size: var(--cgg-fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.cgg-hoc-tool__notice { margin: var(--cgg-s2) 0 0; font-size: var(--cgg-fs-small); line-height: 1.5; color: var(--cgg-ink-72); }
.cgg-hoc-tool__notice strong { font-weight: 600; color: var(--cgg-ink); }

.cgg-hoc-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--cgg-hoc-control-h); padding: .875rem 1.375rem;
	background: var(--cgg-porcelain); color: var(--cgg-ink);
	border: 1px solid var(--cgg-ink-55);
	font-family: var(--cgg-sans); font-size: var(--cgg-fs-btn); font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--cgg-dur) var(--cgg-ease), color var(--cgg-dur) var(--cgg-ease);
}
.cgg-hoc-btn-ghost:hover, .cgg-hoc-btn-ghost:focus-visible { background: var(--cgg-deep); color: var(--cgg-porcelain); border-color: var(--cgg-deep); }
.cgg-hoc-btn-ghost:disabled { opacity: .45; cursor: default; background: transparent; color: var(--cgg-ink-72); border-color: var(--cgg-ink-18); }

.cgg-hoc-announcer { margin: 0 0 var(--cgg-s3); font-size: var(--cgg-fs-small); line-height: 1.5; color: var(--cgg-ink-72); }
.cgg-hoc-announcer:empty { display: none; }
.cgg-hoc-noscript { border-left: .25rem solid var(--cgg-plum); padding: var(--cgg-s3) var(--cgg-s4); background: var(--cgg-limestone); margin-bottom: var(--cgg-s4); }

/* ---- Walkthrough frame ---- */
.cgg-hoc-walk {
	--hair: var(--cgg-ink-18);
	background: var(--cgg-limestone);
	padding: var(--cgg-s3) var(--cgg-s4) var(--cgg-s5);
	margin-bottom: var(--cgg-s4);
}

/* Progress bar and step list */
.cgg-hoc-progress__track { height: 3px; background: var(--cgg-ink-18); margin-bottom: var(--cgg-s3); }
.cgg-hoc-progress__bar { height: 3px; background: var(--cgg-plum); width: 20%; transition: width var(--cgg-dur) var(--cgg-ease); }
.cgg-hoc-progress__bar[data-step="2"] { width: 40%; }
.cgg-hoc-progress__bar[data-step="3"] { width: 60%; }
.cgg-hoc-progress__bar[data-step="4"] { width: 80%; }
.cgg-hoc-progress__bar[data-step="5"] { width: 100%; }
.cgg-hoc-steps { list-style: none; margin: 0 0 var(--cgg-s3); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cgg-s2); }
.cgg-hoc-steps__item { min-width: 0; }
/* The step list and the first step's fields are built by app.js after the markup arrives. Reserve their
   space (one 46px row of tabs; the measured height of the step-1 field grid, rounded down) so nothing below
   them moves when they appear (1.1.0 shifted the page by about 0.08 CLS on a warm load at 1440×900). Only
   when scripts run (the theme swaps no-js for js on <html> before paint); without them nothing is reserved. */
.js .cgg-hoc-steps:empty { min-height: calc(var(--cgg-hoc-control-h) + 2px); }
.js .cgg-hoc-panel[data-step="budget"] .cgg-hoc-fields:empty { min-height: 20rem; }
@media (max-width: 1099.98px) { .js .cgg-hoc-panel[data-step="budget"] .cgg-hoc-fields:empty { min-height: 21.25rem; } }
@media (max-width: 767.98px) { .js .cgg-hoc-panel[data-step="budget"] .cgg-hoc-fields:empty { min-height: 27rem; } }
@media (max-width: 599.98px) { .js .cgg-hoc-panel[data-step="budget"] .cgg-hoc-fields:empty { min-height: 60rem; } }
.cgg-hoc-step {
	display: flex; align-items: center; gap: .625rem; width: 100%; min-height: var(--cgg-hoc-control-h);
	padding: .5rem .75rem; margin: 0;
	background: var(--cgg-porcelain); color: var(--cgg-ink-72);
	border: 1px solid transparent;
	font-family: var(--cgg-sans); font-size: .9375rem; font-weight: 500; line-height: 1.3; text-align: left;
	cursor: pointer;
	transition: border-color var(--cgg-dur) var(--cgg-ease), background-color var(--cgg-dur) var(--cgg-ease), color var(--cgg-dur) var(--cgg-ease);
}
.cgg-hoc-step:hover { border-color: var(--cgg-ink-55); color: var(--cgg-ink); }
.cgg-hoc-step:focus-visible { outline: 2px solid var(--cgg-plum); outline-offset: 2px; }
.cgg-hoc-step__num {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 1.75rem; height: 1.75rem;
	border: 1px solid var(--cgg-ink-55); color: var(--cgg-ink-72);
	font-size: .8125rem; font-weight: 600; letter-spacing: 0;
}
.cgg-hoc-step__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgg-hoc-step[data-visited="true"] { color: var(--cgg-ink); }
.cgg-hoc-step[data-visited="true"] .cgg-hoc-step__num { border-color: var(--cgg-plum); color: var(--cgg-plum); }
.cgg-hoc-step[aria-current="step"] { background: var(--cgg-plum); border-color: var(--cgg-plum); color: var(--cgg-porcelain); font-weight: 600; }
.cgg-hoc-step[aria-current="step"]:hover { background: var(--cgg-deep); border-color: var(--cgg-deep); color: var(--cgg-porcelain); }
.cgg-hoc-step[aria-current="step"] .cgg-hoc-step__num { background: var(--cgg-porcelain); border-color: var(--cgg-porcelain); color: var(--cgg-plum); }
.cgg-hoc-step[data-invalid="true"] .cgg-hoc-step__num { box-shadow: 0 0 0 2px var(--cgg-porcelain), 0 0 0 3px var(--cgg-plum); }
.cgg-hoc-step[aria-current="step"][data-invalid="true"] .cgg-hoc-step__num { box-shadow: 0 0 0 2px var(--cgg-plum), 0 0 0 3px var(--cgg-porcelain); }

/* Errors */
.cgg-hoc-errors:empty { display: none; }
.cgg-hoc-errors { border-left: .25rem solid var(--cgg-plum); background: var(--cgg-porcelain); padding: var(--cgg-s3) var(--cgg-s4); margin: 0 0 var(--cgg-s3); }
.cgg-hoc-errors__lead { margin: 0 0 var(--cgg-s2); font-weight: 600; }
.cgg-hoc-errors ul { margin: 0; padding-left: 1.25em; }
.cgg-hoc-errors li + li { margin-top: var(--cgg-s2); }
.cgg-hoc-errors a { color: var(--cgg-plum); text-underline-offset: 3px; }

/* Panels */
.cgg-hoc-panel { background: var(--cgg-porcelain); border: 1px solid var(--cgg-ink-18); padding: var(--cgg-s4); min-width: 0; }
.cgg-hoc-panel__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cgg-s1) var(--cgg-s3); margin: 0; font-size: var(--cgg-fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.cgg-hoc-panel__h:focus { outline: none; }
.cgg-hoc-panel__h:focus-visible { outline: 2px solid var(--cgg-plum); outline-offset: 4px; }
.cgg-hoc-panel__step { font-size: var(--cgg-fs-eye); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cgg-plum); }
.cgg-hoc-panel__intro { margin: var(--cgg-s2) 0 var(--cgg-s4); max-width: 60rem; font-size: var(--cgg-fs-small); line-height: 1.5; color: var(--cgg-ink-72); }

.cgg-hoc-check {
	display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); column-gap: .875rem; align-items: start;
	padding: .25rem 0 .625rem; border-bottom: 1px solid var(--cgg-ink-18);
	margin: 0 0 var(--cgg-s4); cursor: pointer; font-weight: 500; line-height: 1.4;
}
.cgg-hoc-check input { width: 1.375rem; height: 1.375rem; margin: .1rem 0 0; accent-color: var(--cgg-plum); cursor: pointer; }

/* Fields: a grid of cards whose control rows sit on one line regardless of label, hint or error length
   (rows: label, hint (flexible), error message, controls; the controls are bottom-aligned) */
.cgg-hoc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cgg-s4) var(--cgg-s6); align-items: stretch; }
.cgg-hoc-field {
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; align-content: start;
	min-width: 0; padding: 0 0 var(--cgg-s3); border-bottom: 1px solid var(--cgg-ink-18);
}
.cgg-hoc-field__label { display: block; font-weight: 600; line-height: 1.35; margin: 0 0 var(--cgg-s1); }
.cgg-hoc-field__hint { margin: 0 0 var(--cgg-s2); font-size: var(--cgg-fs-small); line-height: 1.45; color: var(--cgg-ink-72); }
.cgg-hoc-field__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--cgg-s3); align-items: end; align-self: end; }
.cgg-hoc-ctl { min-width: 0; }
.cgg-hoc-mini { display: block; font-size: var(--cgg-fs-eye); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cgg-ink-72); margin: 0 0 var(--cgg-s1); line-height: 1.4; }
.cgg-hoc input[type="text"], .cgg-hoc select {
	display: block; box-sizing: border-box; width: 100%; height: var(--cgg-hoc-control-h); min-height: var(--cgg-hoc-control-h);
	padding: 0 1rem; margin: 0;
	background: var(--cgg-porcelain); color: var(--cgg-ink);
	border: 1px solid var(--cgg-ink-55); font-family: var(--cgg-sans); font-size: 1rem; line-height: 1.4;
	font-variant-numeric: tabular-nums;
}
.cgg-hoc select {
	appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23211C20' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; background-size: .75rem .5rem;
}
.cgg-hoc input[type="text"]:hover, .cgg-hoc select:hover { border-color: var(--cgg-ink); }
.cgg-hoc input[type="text"]:focus-visible, .cgg-hoc select:focus-visible { outline: 2px solid var(--cgg-plum); outline-offset: 0; border-color: var(--cgg-plum); }
.cgg-hoc input[type="text"]:disabled { background: var(--cgg-limestone); color: var(--cgg-ink-55); cursor: not-allowed; }
.cgg-hoc input[aria-invalid="true"] { border-color: var(--cgg-plum); box-shadow: inset 0 0 0 1px var(--cgg-plum); }
.cgg-hoc-field__err { margin: 0 0 var(--cgg-s3); font-size: var(--cgg-fs-small); font-weight: 500; line-height: 1.45; color: var(--cgg-plum); }
.cgg-hoc-field__err[hidden] { display: none; }

/* Back / example / clear / Next */
.cgg-hoc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cgg-s3) var(--cgg-s4); margin-top: var(--cgg-s4); }
.cgg-hoc-nav__aux { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: var(--cgg-s2) var(--cgg-s5); }
.cgg-hoc-nav .cgg-btn[hidden] { display: none; }
.cgg-hoc-nav .cgg-hoc-tlink { margin: 0; }

/* Text-style buttons (review table Edit, example and clear) */
.cgg-hoc-tlink {
	display: inline-flex; align-items: center; min-height: var(--cgg-hoc-control-h); padding: 0 .25rem; margin: -.5rem 0;
	background: none; border: 0; color: var(--cgg-plum);
	font-family: var(--cgg-sans); font-size: .9375rem; font-weight: 600;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
.cgg-hoc-tlink:focus-visible { outline: 2px solid var(--cgg-plum); outline-offset: 2px; }
.cgg-hoc-tlink:hover { color: var(--cgg-deep); text-decoration-color: transparent; }

/* Review table */
.cgg-hoc-review { margin: 0 0 var(--cgg-s6); overflow-x: auto; }
.cgg-hoc-review__table { width: 100%; border-collapse: collapse; font-size: var(--cgg-fs-small); line-height: 1.45; }
.cgg-hoc-review__table th, .cgg-hoc-review__table td { padding: .625rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cgg-ink-18); }
.cgg-hoc-review__table thead th { font-size: var(--cgg-fs-eye); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cgg-ink-72); border-bottom-color: var(--cgg-ink); }
.cgg-hoc-review__table tbody th[scope="row"] { font-weight: 500; }
.cgg-hoc-review__group th { padding-top: var(--cgg-s5); font-size: var(--cgg-fs-eye); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cgg-plum); border-bottom-color: var(--cgg-plum); }
.cgg-hoc-review__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Results */
.cgg-hoc-results { padding-top: var(--cgg-s5); border-top: 1px solid var(--cgg-ink); }
.cgg-hoc-results__h { margin: 0; font-size: var(--cgg-fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.cgg-hoc-results__note { font-size: var(--cgg-fs-small); line-height: 1.5; color: var(--cgg-ink-72); margin: var(--cgg-s2) 0 var(--cgg-s5); max-width: 44rem; }
.cgg-hoc-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cgg-s5) var(--cgg-s6); }
.cgg-hoc-metricgroup { min-width: 0; }
.cgg-hoc-metricgroup__h { margin: 0; padding-bottom: var(--cgg-s2); border-bottom: 1px solid var(--cgg-plum); color: var(--cgg-plum); }
.cgg-hoc-metric { padding: var(--cgg-s3) 0; border-bottom: 1px solid var(--cgg-ink-18); }
.cgg-hoc-metric__label { display: block; font-size: var(--cgg-fs-small); line-height: 1.4; }
.cgg-hoc-metric__value { display: block; margin-top: var(--cgg-s1); font-family: var(--cgg-accent); font-weight: 400; font-size: var(--cgg-fs-support); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cgg-hoc-metric[data-state="unknown"] .cgg-hoc-metric__value,
.cgg-hoc-metric[data-state="suppressed"] .cgg-hoc-metric__value { font-family: var(--cgg-sans); font-weight: 500; font-size: var(--cgg-fs-body); color: var(--cgg-ink-72); }
.cgg-hoc-metric[data-state="suppressed"] .cgg-hoc-metric__value { color: var(--cgg-plum); }
.cgg-hoc-metric--negative .cgg-hoc-metric__value { color: var(--cgg-plum); }
.cgg-hoc-metric__meta { display: block; margin-top: var(--cgg-s1); font-size: var(--cgg-fs-small); line-height: 1.45; color: var(--cgg-ink-72); }
.cgg-hoc-metric__meta:empty { display: none; }
.cgg-hoc-formulas { margin-top: var(--cgg-s5); }
.cgg-hoc-formulas summary { cursor: pointer; min-height: var(--cgg-hoc-control-h); display: flex; align-items: center; font-weight: 600; color: var(--cgg-plum); }
.cgg-hoc-formulas ol { margin: var(--cgg-s2) 0 0; padding-left: 1.25em; font-size: var(--cgg-fs-small); line-height: 1.5; }
.cgg-hoc-formulas li + li { margin-top: var(--cgg-s2); }

/* About disclosure (after the walkthrough) */
.cgg-hoc-about { max-width: 64rem; border-top: 1px solid var(--cgg-ink-18); border-bottom: 1px solid var(--cgg-ink-18); }
.cgg-hoc-about__s { cursor: pointer; min-height: var(--cgg-hoc-control-h); display: flex; align-items: center; font-weight: 600; color: var(--cgg-plum); }
.cgg-hoc-about__list { list-style: none; margin: 0 0 var(--cgg-s4); padding: 0; }
.cgg-hoc-about__list li { padding: var(--cgg-s3) 0; border-top: 1px solid var(--cgg-ink-18); line-height: 1.55; }
.cgg-hoc-about__list strong { font-weight: 600; }

/* ---- Landing: three path cards ---- */
.cgg-hoc-paths { max-width: none; }
.cgg-hoc-paths__intro { max-width: 44rem; line-height: 1.55; }
.cgg-hoc-cards { list-style: none; margin: var(--cgg-s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cgg-gap); }
.cgg-hoc-card {
	position: relative; display: flex; flex-direction: column; gap: var(--cgg-s3); min-width: 0;
	padding: 0 var(--cgg-s5) var(--cgg-s5);
	background: var(--cgg-limestone); border-top: .25rem solid var(--cgg-plum);
	transition: background-color var(--cgg-dur) var(--cgg-ease), border-color var(--cgg-dur) var(--cgg-ease);
}
.cgg-hoc-card:hover, .cgg-hoc-card:focus-within { border-top-color: var(--cgg-deep); }
.cgg-hoc-card__num { display: block; font-family: var(--cgg-accent); font-weight: 400; font-size: var(--cgg-fs-h2l); line-height: 1; letter-spacing: -.02em; color: var(--cgg-plum); }
.cgg-hoc-card__h { margin: 0; font-size: var(--cgg-fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.cgg-hoc-card__link { color: inherit; text-decoration: none; }
.cgg-hoc-card__link::after { content: ""; position: absolute; inset: 0; }
.cgg-hoc-card__link:focus-visible { outline: none; }
.cgg-hoc-card:has(.cgg-hoc-card__link:focus-visible) { outline: 2px solid var(--cgg-plum); outline-offset: 3px; }
.cgg-hoc-card:hover .cgg-hoc-card__link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cgg-hoc-card__text { margin: 0; line-height: 1.55; flex: 1 1 auto; }
.cgg-hoc-card__more {
	display: inline-flex; align-items: center; gap: .875rem; margin-top: var(--cgg-s2);
	font-size: var(--cgg-fs-btn); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cgg-plum);
}
.cgg-hoc-card__more::after {
	content: ""; width: 1.75rem; height: .5625rem; background: currentColor;
	-webkit-mask: linear-gradient(#000, #000) left center / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.5.5 5.5 4.5.5 8.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") right center / .375rem .5625rem no-repeat;
	mask: linear-gradient(#000, #000) left center / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.5.5 5.5 4.5.5 8.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") right center / .375rem .5625rem no-repeat;
	transition: width var(--cgg-dur) var(--cgg-ease);
}
.cgg-hoc-card:hover .cgg-hoc-card__more::after { width: 2.75rem; }

/* ---- Cross-links ---- */
.cgg-hoc-pathnav { max-width: none; }
.cgg-hoc-pathnav__intro { max-width: 44rem; line-height: 1.55; }
.cgg-hoc-pathnav__list { list-style: none; margin: var(--cgg-s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cgg-s3) var(--cgg-s6); }
.cgg-hoc-pathnav__link { display: block; padding: var(--cgg-s4) 0; border-top: 1px solid var(--cgg-ink-18); color: inherit; text-decoration: none; }
.cgg-hoc-pathnav__link:hover .cgg-hoc-pathnav__t, .cgg-hoc-pathnav__link:focus-visible .cgg-hoc-pathnav__t { color: var(--cgg-plum); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cgg-hoc-pathnav__t { display: block; font-weight: 600; line-height: 1.35; }
.cgg-hoc-pathnav__d { display: block; margin-top: var(--cgg-s1); font-size: var(--cgg-fs-small); line-height: 1.5; color: var(--cgg-ink-72); }

/* ---- Resource pages ---- */
.cgg-hoc-path { max-width: none; }
.cgg-hoc-checklist { list-style: none; margin: var(--cgg-s4) 0 0; padding: 0; border-bottom: 1px solid var(--cgg-ink-18); }
.cgg-hoc-checklist li { position: relative; padding: var(--cgg-s3) 0 var(--cgg-s3) 1.75rem; border-top: 1px solid var(--cgg-ink-18); line-height: 1.55; }
.cgg-hoc-checklist li::before { content: ""; position: absolute; left: .25rem; top: calc(var(--cgg-s3) + .55em); width: .5rem; height: .5rem; background: var(--cgg-plum); }
.cgg-hoc-checklist strong { font-weight: 600; }
.cgg-hoc-resgroup { max-width: 52rem; }
.cgg-hoc-resgroup__intro { max-width: 44rem; line-height: 1.55; }
.cgg-hoc-resources { list-style: none; margin: var(--cgg-s5) 0 0; padding: 0; display: grid; gap: var(--cgg-s4); }
.cgg-hoc-resource { padding: var(--cgg-s5); background: var(--cgg-limestone); border-top: 2px solid var(--cgg-plum); min-width: 0; }
.cgg-hoc-resource > * + * { margin-top: var(--cgg-s3); }
.cgg-hoc-resource__name { margin: 0; font-size: var(--cgg-fs-q); font-weight: 600; line-height: 1.3; }
.cgg-hoc-resource__name a { display: inline; color: var(--cgg-plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.cgg-hoc-resource__name a::after {
	content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .35em; vertical-align: baseline; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1.5h7v7M10.5 1.5 1.5 10.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1.5h7v7M10.5 1.5 1.5 10.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cgg-hoc-resource__name a:hover { color: var(--cgg-deep); text-decoration-color: transparent; }
.cgg-hoc-resource__what { margin: 0; line-height: 1.55; max-width: 44rem; }
.cgg-hoc-resource__phones, .cgg-hoc-resource__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cgg-s2); }
.cgg-hoc-resource__phones li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cgg-s1) var(--cgg-s3); line-height: 1.45; }
.cgg-hoc-tel { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--cgg-hoc-control-h); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cgg-plum); }
a.cgg-hoc-tel { padding: 0 1rem; background: var(--cgg-porcelain); border: 1px solid var(--cgg-plum); text-decoration: none; transition: background-color var(--cgg-dur) var(--cgg-ease), color var(--cgg-dur) var(--cgg-ease); }
a.cgg-hoc-tel::before {
	content: ""; flex-shrink: 0; width: .875rem; height: .875rem; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 1.2 6.3 4.4 4.9 6a9.7 9.7 0 0 0 5.1 5.1l1.6-1.4 3.2 2.1-.9 2.7c-.2.5-.7.8-1.2.8C6.6 15.1.9 9.4.7 3.3c0-.5.3-1 .8-1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 1.2 6.3 4.4 4.9 6a9.7 9.7 0 0 0 5.1 5.1l1.6-1.4 3.2 2.1-.9 2.7c-.2.5-.7.8-1.2.8C6.6 15.1.9 9.4.7 3.3c0-.5.3-1 .8-1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.cgg-hoc-tel:hover, a.cgg-hoc-tel:focus-visible { background: var(--cgg-deep); border-color: var(--cgg-deep); color: var(--cgg-porcelain); }
.cgg-hoc-resource__phone-label { font-size: var(--cgg-fs-small); color: var(--cgg-ink-72); }
.cgg-hoc-resource__links a { display: inline-flex; align-items: center; min-height: var(--cgg-hoc-control-h); font-size: var(--cgg-fs-small); font-weight: 500; line-height: 1.4; color: var(--cgg-plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cgg-hoc-resource__links a:hover { color: var(--cgg-deep); text-decoration-color: transparent; }
.cgg-hoc-resource__caveat { margin: 0; padding-top: var(--cgg-s3); border-top: 1px solid var(--cgg-ink-18); font-size: var(--cgg-fs-small); line-height: 1.5; color: var(--cgg-ink-72); max-width: 44rem; }

/* ---- Support list, notices ---- */
.cgg-hoc-support__list, .cgg-hoc-notices__list { list-style: none; margin: var(--cgg-s4) 0 0; padding: 0; border-bottom: 1px solid var(--cgg-ink-18); }
.cgg-hoc-support__list li, .cgg-hoc-notices__list li { position: relative; padding: var(--cgg-s3) 0 var(--cgg-s3) 1.75rem; border-top: 1px solid var(--cgg-ink-18); line-height: 1.55; }
.cgg-hoc-support__list li::before, .cgg-hoc-notices__list li::before { content: ""; position: absolute; left: .25rem; top: calc(var(--cgg-s3) + .6em); width: .5rem; height: 1px; background: var(--cgg-ink); }

/* ---- The optional assessment: a distinct, quiet panel after the free content; a label, not a price tag;
   an outlined consultation link, not a checkout button ---- */
.cgg-hoc-assess { max-width: 52rem; padding: var(--cgg-s6); background: var(--cgg-limestone); border-top: 2px solid var(--cgg-ink); }
.cgg-hoc-assess__fee { margin: 0 0 var(--cgg-s4); padding: var(--cgg-s1) 0 var(--cgg-s1) var(--cgg-s3); border-left: 2px solid var(--cgg-plum); font-weight: 600; line-height: 1.4; }
.cgg-hoc-cta { margin-top: var(--cgg-s5); }
.cgg-btn.cgg-hoc-cta__link { background: transparent; color: var(--cgg-plum); box-shadow: inset 0 0 0 1px var(--cgg-plum); }
.cgg-btn.cgg-hoc-cta__link:hover, .cgg-btn.cgg-hoc-cta__link:focus-visible { background: var(--cgg-deep); color: var(--cgg-porcelain); box-shadow: inset 0 0 0 1px var(--cgg-deep); }

/* ---- Utilities ---- */
.cgg-hoc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Responsive ---- */
@media (max-width: 899.98px) {
	.cgg-hoc__head--art { grid-template-columns: minmax(0, 1fr); gap: var(--cgg-s4); }
	.cgg-hoc-art--head { order: -1; min-height: 0; height: 5rem; }
	.cgg-hoc-metrics { grid-template-columns: 1fr; gap: var(--cgg-s5); }
	.cgg-hoc-cards { grid-template-columns: 1fr; }
	.cgg-hoc-pathnav__list { grid-template-columns: 1fr; gap: 0; }
	.cgg-hoc-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cgg-s1); }
	.cgg-hoc-step { justify-content: center; padding: .5rem .25rem; }
	.cgg-hoc-step__name { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 899.98px) and (max-height: 699.98px) {
	.cgg-hoc-art--head { display: none; }
}
@media (max-width: 599.98px) {
	.cgg-hoc-assess { padding: var(--cgg-s5) var(--cgg-s4); }
	.cgg-hoc-resource { padding: var(--cgg-s4); }
	.cgg-hoc-walk { padding: var(--cgg-s3) var(--cgg-s3) var(--cgg-s4); margin-inline: calc(-1 * var(--cgg-gut) + var(--cgg-s2)); }
	.cgg-hoc-panel { padding: var(--cgg-s3); }
	.cgg-hoc-fields { grid-template-columns: 1fr; gap: var(--cgg-s4); }
	.cgg-hoc-field__row { grid-template-columns: 1fr; gap: var(--cgg-s3); }
	.cgg-hoc-start .cgg-btn { width: 100%; }
	.cgg-hoc-nav { flex-direction: column-reverse; align-items: stretch; }
	.cgg-hoc-nav .cgg-btn, .cgg-hoc-nav .cgg-hoc-btn-ghost { width: 100%; }
	.cgg-hoc-nav__aux { justify-content: space-between; }
	.cgg-hoc-review__table thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cgg-hoc-review__table tr:not(.cgg-hoc-review__group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--cgg-s3); padding: var(--cgg-s3) 0; border-bottom: 1px solid var(--cgg-ink-18); }
	.cgg-hoc-review__table tr:not(.cgg-hoc-review__group) > * { border: 0; padding: 0; }
	.cgg-hoc-review__table tbody th[scope="row"] { grid-column: 1 / -1; }
	.cgg-hoc-review__table tr:not(.cgg-hoc-review__group) td:nth-child(2) { grid-column: 1; text-align: left !important; font-weight: 600; }
	.cgg-hoc-review__table tr:not(.cgg-hoc-review__group) td:nth-child(3) { grid-column: 1; color: var(--cgg-ink-72); }
	.cgg-hoc-review__table tr:not(.cgg-hoc-review__group) td:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
	.cgg-hoc-review__group th { padding: var(--cgg-s4) 0 var(--cgg-s2); }
	.cgg-hoc-tlink { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cgg-hoc *, .cgg-hoc *::before, .cgg-hoc *::after { transition: none !important; }
}
@media print {
	.cgg-hoc-art,
	.cgg-hoc-start, .cgg-hoc-nav, .cgg-hoc-formulas summary, .cgg-hoc-steps, .cgg-hoc-progress__track { display: none; }
	.cgg-hoc-panel[hidden] { display: block !important; }
	.cgg-hoc-formulas[open] ol, .cgg-hoc-formulas ol { display: block; }
	.cgg-hoc-about[open] .cgg-hoc-about__list, .cgg-hoc-about .cgg-hoc-about__list { display: block; }
}

/* ==== CGG HOC photo art START (2026-11-08, appended via Plugin File Editor) ====
   Licensed photo: WP media ID 108, Envato "Beautiful Aerial View Of The Chicago Suburb Residential"
   by Mix-Tape, license "CGG Legacy Law website" (registered 2026-11-08).
   Rollback: delete everything from this START line through the END line below.
   Original file backup: cgg-home-options-calculator/assets/calculator.css (live-source-backup),
   SHA-256 4c1eed5f56cdd8117093ea142257300e5d10e705d39459d8a5ae0e17240954fe (31,408 bytes). */
body.cgg-hoc-route-calculator .cgg-hoc-art,
body.cgg-hoc-route-landing .cgg-hoc-art,
body.cgg-hoc-route-keep .cgg-hoc-art,
body.cgg-hoc-route-sale .cgg-hoc-art,
body.cgg-hoc-route-next .cgg-hoc-art {
  background-color: var(--cgg-limestone);
  background-image: linear-gradient(rgba(94, 26, 76, .10), rgba(94, 26, 76, .10)), url("/wp-content/uploads/2026/11/cgg-chicago-suburban-neighborhood-aerial-scaled.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 55%;
}
body.cgg-hoc-route-calculator .cgg-hoc-art .cgg-hoc-art__svg,
body.cgg-hoc-route-landing .cgg-hoc-art .cgg-hoc-art__svg,
body.cgg-hoc-route-keep .cgg-hoc-art .cgg-hoc-art__svg,
body.cgg-hoc-route-sale .cgg-hoc-art .cgg-hoc-art__svg,
body.cgg-hoc-route-next .cgg-hoc-art .cgg-hoc-art__svg { visibility: hidden; }
body.cgg-hoc-route-landing .cgg-hoc-art--head { background-position: 50% 35%; }
body.cgg-hoc-route-landing .cgg-hoc-card .cgg-hoc-art--card { background-size: 220% auto; }
body.cgg-hoc-route-landing .cgg-hoc-card:nth-child(1) .cgg-hoc-art--card { background-position: 88% 62%; }
body.cgg-hoc-route-landing .cgg-hoc-card:nth-child(2) .cgg-hoc-art--card { background-position: 8% 58%; }
body.cgg-hoc-route-landing .cgg-hoc-card:nth-child(3) .cgg-hoc-art--card { background-position: 45% 30%; }
body.cgg-hoc-route-keep .cgg-hoc-art--head { background-size: 190% auto; background-position: 86% 60%; }
body.cgg-hoc-route-sale .cgg-hoc-art--head { background-size: 180% auto; background-position: 6% 55%; }
body.cgg-hoc-route-next .cgg-hoc-art--head { background-size: 170% auto; background-position: 40% 38%; }
/* ==== CGG HOC photo art END ==== */
