/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: var(--rd-radius-sm);
	padding: 0.9rem 1.3rem;
	font-weight: 700;
	font-size: 0.98rem;
	/* A .btn is a button whichever element it lands on; the global anchor
	   underline must not reappear in any state. */
	text-decoration: none;
	border: 1px solid transparent;
	transition: background var(--rd-ease), transform var(--rd-ease), color var(--rd-ease);
	cursor: pointer;
	min-height: 44px;
}
.btn:hover, .btn:focus, .btn:active, .btn:visited { text-decoration: none; }
.btn-primary { background: var(--rd-primary); color: #fff; }
.btn-primary:hover { background: var(--rd-primary-dark); }
.btn-secondary { background: transparent; color: var(--rd-text); border-color: var(--rd-border); }
.btn-secondary:hover { background: var(--rd-surface); }
.btn-light { background: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-border); }
.btn-light:hover { background: var(--rd-surface-2); border-color: var(--rd-muted); }

/* Badge */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--rd-fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rd-accent-ink);
}

/* Card */
.card {
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	padding: var(--rd-space-4);
}
.card h3 { margin-bottom: var(--rd-space-1); }
.card p { color: var(--rd-muted); margin: 0; }
.card .card-link { display: inline-block; margin-top: var(--rd-space-3); color: var(--rd-accent-ink); font-weight: 700; text-decoration: none; }

/* Breadcrumb */
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 var(--rd-space-4); font-size: var(--rd-fs-small); color: var(--rd-muted); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--rd-border); }
.breadcrumb a { color: var(--rd-muted); }
.breadcrumb a:hover { color: var(--rd-accent-ink); }
.breadcrumb [aria-current="page"] { color: var(--rd-text); font-weight: 600; }

/* FAQ / accordion */
.faq-item { border-bottom: 1px solid var(--rd-border); }
.faq-item:first-child { border-top: 1px solid var(--rd-border); }
.faq-question {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: var(--rd-space-3) 0;
	font-weight: 700;
	font-size: 1.02rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	cursor: pointer;
	color: var(--rd-text);
	min-height: 44px;
}
.faq-question .faq-icon { flex-shrink: 0; transition: transform var(--rd-ease); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 0 var(--rd-space-3); color: var(--rd-muted); }
.faq-answer[hidden] { display: none; }

/* rusya-faq-q markup stays in post_content as the single source rusya_get_faq_pairs()
   parses for both the accordion above and FAQPage schema — but the_content() still
   renders that raw h3+p as plain text too. Hide the raw pair once it's re-rendered
   as an accordion item, so the FAQ never appears twice on the same page. */
.content-wrap article > h3.rusya-faq-q,
.content-wrap article > h3.rusya-faq-q + p { display: none; }

/* Trust item */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--rd-space-1) var(--rd-space-4); color: var(--rd-muted); font-size: var(--rd-fs-small); }
.trust-item { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Process step */
.process { counter-reset: rd-step; }
.process .card { position: relative; padding-top: 3.6rem; }
.process .card::before {
	counter-increment: rd-step;
	content: counter(rd-step);
	position: absolute;
	top: 1.3rem; left: 1.5rem;
	width: 2rem; height: 2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--rd-primary);
	color: #fff;
	font-weight: 800;
	font-size: 0.9rem;
}

/* CTA block */
.cta-band {
	background: var(--rd-navy);
	color: #fff;
	border-radius: var(--rd-radius-lg);
	padding: var(--rd-space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-5);
	flex-wrap: wrap;
}
.cta-band p { color: #c7d2db; }
.cta-band h2 { color: #fff; }
.cta-band-actions { display: flex; gap: var(--rd-space-2); flex-wrap: wrap; }
.btn-on-dark { border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* ===== Atlas components (GEO-first, reusable content blocks) ===== */

/* Atlas Summary — the "30 second" direct-answer block. `.summary-box` is the
   same visual treatment used ad hoc (e.g. homepage GEO block); kept as an
   alias rather than duplicated rules. */
.atlas-summary, .summary-box {
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-left: 4px solid var(--rd-primary);
	border-radius: var(--rd-radius-sm);
	padding: var(--rd-space-4);
	margin: var(--rd-space-4) 0;
}
.summary-box h2, .summary-box h3 { margin-top: 0; }

/* Atlas Decision — cautious yes/no-shaped verdict, never absolute */
.atlas-decision {
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-left: 4px solid var(--rd-focus);
	border-radius: var(--rd-radius-sm);
	padding: var(--rd-space-4);
	margin: var(--rd-space-4) 0;
}
.atlas-decision-verdict {
	display: inline-block;
	font-size: var(--rd-fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rd-focus);
	margin: 0 0 0.5rem;
}

/* Atlas Decision — table variant */
.atlas-decision-table-wrap { padding: 0; overflow-x: auto; }
.atlas-decision-table { width: 100%; border-collapse: collapse; }
.atlas-decision-table th, .atlas-decision-table td { padding: var(--rd-space-3); border-bottom: 1px solid var(--rd-border); text-align: left; vertical-align: top; }
.atlas-decision-table thead th { background: var(--rd-bg); font-size: var(--rd-fs-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rd-muted); }
.atlas-decision-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
	.atlas-decision-table thead { display: none; }
	.atlas-decision-table, .atlas-decision-table tbody, .atlas-decision-table tr, .atlas-decision-table td { display: block; width: 100%; }
	.atlas-decision-table tr { border-bottom: 1px solid var(--rd-border); padding: var(--rd-space-3) 0; }
	.atlas-decision-table td { border-bottom: none; padding: 0.3rem 0; }
	.atlas-decision-table td::before { content: attr(data-label); display: block; font-size: var(--rd-fs-small); font-weight: 700; color: var(--rd-muted); margin-bottom: 0.2rem; }
}

/* Atlas Warning — myth/fact correction pairs */
.atlas-warning { display: flex; flex-direction: column; gap: var(--rd-space-3); margin: var(--rd-space-4) 0; }
.atlas-warning-item {
	background: var(--rd-error-bg);
	border-radius: var(--rd-radius-sm);
	padding: var(--rd-space-3) var(--rd-space-4);
}
.atlas-warning-myth { color: var(--rd-error); font-weight: 700; margin: 0 0 0.35rem; }
.atlas-warning-fact { color: var(--rd-success); font-weight: 600; }

/* Atlas Checklist */
.atlas-checklist {
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	padding: var(--rd-space-4);
	margin: var(--rd-space-4) 0;
}
.atlas-checklist-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rd-space-4); }
.atlas-checklist-group h4 { margin: 0 0 0.5rem; font-size: var(--rd-fs-body); }
@media (max-width: 640px) {
	.atlas-checklist-groups { grid-template-columns: 1fr; }
}

/* Atlas Sources — closing transparency/E-E-A-T note */
.atlas-sources, .source-note {
	font-size: var(--rd-fs-small);
	color: var(--rd-muted);
	border-top: 1px solid var(--rd-border);
	padding-top: var(--rd-space-3);
	margin-top: var(--rd-space-5);
}
.atlas-sources h2 { font-size: var(--rd-fs-h3); color: var(--rd-text); }
.atlas-sources-list { list-style: none; padding: 0; margin: 0 0 var(--rd-space-3); }
.atlas-sources-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--rd-border); }
.atlas-sources-list li:last-child { border-bottom: none; }
.atlas-sources-unverified { font-style: italic; }
.atlas-sources-note, .atlas-sources-institution, .atlas-sources-access-date { color: var(--rd-muted); }
.atlas-sources-trust-note { font-size: var(--rd-fs-small); color: var(--rd-muted); font-style: italic; margin: 0 0 var(--rd-space-3); }
.updated-date { font-size: var(--rd-fs-small); color: var(--rd-muted); }

.atlas-cta { margin-top: var(--rd-space-5); }

/* Form field */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rd-space-3) var(--rd-space-4); }
.form-grid .field-full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; margin-bottom: 0.4rem; font-size: 0.95rem; }
.field .required { color: var(--rd-accent-ink); }
.field input, .field select, .field textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-sm);
	background: var(--rd-input-bg);
	font: inherit;
	color: var(--rd-text);
	min-height: 44px;
}
.field textarea { min-height: 130px; }
.field-hint { font-size: var(--rd-fs-small); color: var(--rd-muted); margin-top: 0.3rem; }
.field-error { font-size: var(--rd-fs-small); color: var(--rd-error); margin-top: 0.3rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--rd-error); }
.checkbox-field { display: flex; align-items: flex-start; gap: 0.6rem; }
.checkbox-field input { width: auto; min-height: auto; margin-top: 0.2rem; }

/* Status message */
.status-message { border-radius: var(--rd-radius-sm); padding: var(--rd-space-3) var(--rd-space-4); margin-bottom: var(--rd-space-4); font-weight: 600; }
.status-message.is-success { background: var(--rd-success-bg); color: var(--rd-success); }
.status-message.is-error { background: var(--rd-error-bg); color: var(--rd-error); }

/* Honeypot: hidden from sighted users AND excluded from tab order, but present in DOM/markup */
.rusya-hp { position: absolute; left: -9999px; top: -9999px; }

/* --- Card hierarchy -------------------------------------------------------
   Cards previously had a single flat treatment, which is what made the page
   read as one repeated block. Linked cards (services, sectors, posts) now
   carry a quiet accent rule and lift on interaction; static cards (process,
   value props) stay calm so the eye can tell navigable from informational. */
.card { transition: transform var(--rd-ease), box-shadow var(--rd-ease), border-color var(--rd-ease); }
.card h3 a { text-decoration: none; }
.card:has(.card-link) { position: relative; overflow: hidden; }
.card:has(.card-link)::before {
	content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
	background: var(--rd-primary); opacity: 0; transition: opacity var(--rd-ease);
}
.card:has(.card-link):hover { transform: translateY(-3px); box-shadow: var(--rd-shadow); border-color: var(--rd-muted); }
.card:has(.card-link):hover::before { opacity: 1; }
.card:has(.card-link):focus-within { border-color: var(--rd-primary); box-shadow: var(--rd-shadow); }
.card:has(.card-link):focus-within::before { opacity: 1; }
.card h3 a:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 3px; border-radius: 2px; }
.card .card-link::after { content: ""; }

/* Numbered process steps. The count comes from CSS so the markup stays plain
   content — no hardcoded "1." strings to translate or fall out of sync. */
.process { counter-reset: rd-step; }
.process .card { counter-increment: rd-step; padding-top: var(--rd-space-5); }
.process .card::before {
	content: counter(rd-step, decimal-leading-zero);
	display: block; margin-bottom: var(--rd-space-2);
	font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em;
	color: var(--rd-accent-ink);
}

/* Trust strip. Same four verified statements, given the weight of a stated
   position rather than a caption. */
.trust-row {
	border-top: 1px solid var(--rd-border);
	padding-top: var(--rd-space-3);
	gap: var(--rd-space-2) var(--rd-space-5);
}
.trust-item { font-weight: 600; color: var(--rd-text); }
.trust-item::before { content: "—"; color: var(--rd-accent-ink); font-weight: 800; }

/* Hero card: reads as the primary object on the page, not another grid tile. */
.hero-card { position: relative; }
.hero-card::before {
	content: ""; position: absolute; inset: 0 auto auto 0;
	width: 56px; height: 3px; background: var(--rd-primary);
	border-radius: var(--rd-radius-lg) 0 0 0;
}
.hero-card h3 { margin-top: var(--rd-space-1); }

/* --- Assessment page layout ----------------------------------------------
   The form previously occupied roughly half the desktop viewport with the
   remainder empty. The right column now carries a contextual panel drawn from
   statements already published on this page, so the space does sales and
   reassurance work instead of nothing. The aside follows the form in source
   order, so on narrow screens the form is still the first thing reached. */
.assessment-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--rd-space-5); align-items: start; }
.assessment-layout > article { max-width: none; }
.assessment-aside { position: sticky; top: calc(var(--rd-header-height) + var(--rd-space-4)); }
.assessment-panel { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-lg); padding: var(--rd-space-4); box-shadow: var(--rd-shadow); }
.assessment-panel-title { font-size: var(--rd-fs-h3); margin: 0; }
.assessment-panel-subtitle { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); margin: var(--rd-space-4) 0 var(--rd-space-2); }
.assessment-prep { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--rd-space-1) var(--rd-space-2); }
.assessment-prep li { border: 1px solid var(--rd-border); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: var(--rd-fs-small); color: var(--rd-text); }
.assessment-panel-note { margin: var(--rd-space-4) 0 0; padding-top: var(--rd-space-3); border-top: 1px solid var(--rd-border); color: var(--rd-muted); font-size: var(--rd-fs-small); }
@media (max-width: 1024px) {
	.assessment-layout { grid-template-columns: 1fr; }
	.assessment-aside { position: static; }
}

/* --- Homepage conversion architecture (Sprint #004) -----------------------
   The homepage was an explanation surface: 21 identical cards, six buttons
   pointing at two destinations, and — measured — 5.3 screens on desktop and
   11.8 on mobile between the hero and the next conversion surface. These
   components exist to make the page classify, explain, then ask, in that
   order, without adding a single unverified claim. */

/* Hero scope line. A scan aid so a manufacturer sees its own product group in
   the first view; deliberately not links and not a summary of the sector
   pages, which own those queries. */
.hero-scope {
	margin: 0 0 var(--rd-space-3);
	color: var(--rd-muted);
	font-size: var(--rd-fs-small);
	font-weight: 650;
	letter-spacing: 0.01em;
}
.hero-card-title { font-size: var(--rd-fs-h3); margin-top: var(--rd-space-1); }

/* Copy that sits with a CTA and says what happens after the click. The old
   hero asked for the assessment before explaining what the assessment was. */
.cta-note {
	margin: calc(var(--rd-space-3) * -0.25) 0 var(--rd-space-4);
	color: var(--rd-muted);
	font-size: var(--rd-fs-small);
	max-width: 52ch;
}

/* Mid-page conversion surface. Used exactly twice — after the sector router
   and after the services list — so the page gains conversion opportunities
   without turning into a wall of buttons. */
.section-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rd-space-2) var(--rd-space-4);
	margin-top: var(--rd-space-5);
	padding-top: var(--rd-space-4);
	border-top: 1px solid var(--rd-border);
}
.section-cta-note { color: var(--rd-muted); font-size: var(--rd-fs-small); }
.section-cta-note a { color: var(--rd-accent-ink); font-weight: 650; }

/* Sector router. A classification surface, not six article cards: the name
   carries the weight and the qualifier is secondary, so the visitor can find
   its own product group by scanning names alone. */
.sector-router {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rd-space-3);
}
.sector-tile > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	height: 100%;
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface-2);
	border: 1px solid var(--rd-border);
	border-left: 3px solid var(--rd-border);
	border-radius: var(--rd-radius-sm);
	text-decoration: none;
	color: var(--rd-text);
	transition: border-color var(--rd-ease), background var(--rd-ease), transform var(--rd-ease);
}
.sector-tile > a:hover,
.sector-tile > a:focus-visible {
	border-left-color: var(--rd-primary);
	background: var(--rd-surface);
	transform: translateX(2px);
}
.sector-name { font-weight: 800; font-size: 1.06rem; letter-spacing: -0.015em; }
.sector-go { color: var(--rd-accent-ink); font-weight: 800; flex: 0 0 auto; transition: transform var(--rd-ease); }
.sector-tile > a:hover .sector-go,
.sector-tile > a:focus-visible .sector-go { transform: translateX(3px); }

/* Service list. All six Gold pages kept and linked; the hierarchy is
   typographic rather than a ranking, because calling one service more
   important than another would be an unverified commercial claim. */
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rd-border); }
.service-row { border-bottom: 1px solid var(--rd-border); }
.service-row > a {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: var(--rd-space-2) var(--rd-space-5);
	align-items: baseline;
	padding: var(--rd-space-3) var(--rd-space-2);
	text-decoration: none;
	color: var(--rd-text);
	transition: background var(--rd-ease), padding-left var(--rd-ease);
}
.service-row > a:hover,
.service-row > a:focus-visible { background: var(--rd-navy-tint); padding-left: var(--rd-space-3); }
.service-name { font-weight: 750; font-size: 1.05rem; letter-spacing: -0.015em; }
/* The arrow belongs to the title, not to the row: when the entry-point tag was
   present it rendered after the tag and dropped onto a second line. */
.service-title::after { content: " →"; color: var(--rd-accent-ink); }
.service-desc { color: var(--rd-muted); font-size: var(--rd-fs-small); overflow-wrap: break-word; }

/* Process timeline. Same five steps and the same wording as the old card
   grid — this is a layout change only. The card version stacked to 1.188px on
   mobile, which spent a screen and a half on five short sentences. */
.process-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rd-step;
	display: grid;
	gap: 0;
	border-left: 2px solid var(--rd-border);
	/* The step markers straddle the rule, so the list is inset by half a marker.
	   Without this they sat 3px from the viewport edge at 375px — not clipped,
	   but visibly crowding it. */
	margin-left: 13px;
}
.process-steps > li {
	counter-increment: rd-step;
	position: relative;
	padding: 0 0 var(--rd-space-4) var(--rd-space-5);
}
.process-steps > li:last-child { padding-bottom: 0; }
.process-steps > li::before {
	content: counter(rd-step);
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--rd-primary);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 800;
}
.process-steps h3 { font-size: 1.02rem; margin: 0 0 0.2rem; overflow-wrap: break-word; }
.process-steps p { margin: 0; color: var(--rd-muted); font-size: var(--rd-fs-small); }

/* Working method. The four statements are unchanged; only the card chrome is
   dropped so this section stops competing visually with the two navigational
   sections above it. */
.approach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rd-space-4) var(--rd-space-6); }
.approach-item { padding-left: var(--rd-space-3); border-left: 2px solid var(--rd-primary); }
.approach-item h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.approach-item p { margin: 0; color: var(--rd-muted); font-size: var(--rd-fs-small); }

/* FAQ route. The answer itself stays escaped text; the route to the page that
   owns the detail is a separate element. */
.faq-route {
	display: inline-block;
	margin-top: var(--rd-space-2);
	color: var(--rd-accent-ink);
	font-weight: 700;
	font-size: var(--rd-fs-small);
	text-decoration: none;
}
.faq-route:hover, .faq-route:focus-visible { text-decoration: underline; }

@media (max-width: 900px) {
	.sector-router { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.service-row > a { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
	.approach-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.sector-router { grid-template-columns: minmax(0, 1fr); }
	.sector-tile > a { padding: var(--rd-space-2) var(--rd-space-3); }
	.section-cta .btn { width: 100%; }
}

/* --- Trust & premium layer (Sprint #005) ---------------------------------- */

/* Decision surface. The former "KISACA" block was an Authority-Page component
   borrowed onto the homepage: a large pale card of running prose, 210px on
   desktop and 342px on mobile, that read as a document rather than a decision.
   It is now the page's mid-point brand surface — the one dark moment between
   the hero and the final band, which also breaks the white-box rhythm without
   adding a section. Deliberately not styled like .cta-band: this asks the
   visitor to understand something, it does not ask for the click. */
.decision-surface {
	background: var(--rd-navy);
	color: #e7edf3;
	border-block: 1px solid var(--rd-navy-700);
}
.decision-surface h2 { color: #fff; }
.decision-surface .section-title p { color: #c3d0da; }
.decision-surface .badge { background: rgba(255, 255, 255, 0.08); color: #e7edf3; border-color: rgba(255, 255, 255, 0.16); }

.decision-factors {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rd-space-4) var(--rd-space-5);
}
.decision-factors > li {
	padding-top: var(--rd-space-3);
	border-top: 2px solid var(--rd-primary);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.decision-factor-name { font-weight: 750; font-size: 1.05rem; letter-spacing: -0.015em; color: #fff; }
.decision-factor-note { color: #b9c6d2; font-size: var(--rd-fs-small); overflow-wrap: break-word; }

/* Horizontal process flow on desktop. The vertical timeline stays on mobile —
   five steps side by side at 375px would be unreadable — so this is a
   desktop-only presentation of identical markup, wording and order. The
   connector is drawn with a pseudo-element rather than an icon set, because a
   number, a rule and type carry the sequence on their own. */
@media (min-width: 901px) {
	.process-steps {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--rd-space-4);
		border-left: 0;
		margin-left: 0;
		padding-top: var(--rd-space-5);
	}
	.process-steps > li { padding: 0; }
	.process-steps > li:last-child { padding-bottom: 0; }
	.process-steps > li::before { transform: none; top: calc(var(--rd-space-5) * -1); }
	/* The connecting rule runs behind the markers, stopping at the last step so
	   the flow does not appear to continue past the end. */
	.process-steps > li::after {
		content: "";
		position: absolute;
		left: 26px;
		right: calc(var(--rd-space-4) * -1);
		top: calc(var(--rd-space-5) * -1 + 13px);
		height: 2px;
		background: var(--rd-border);
	}
	.process-steps > li:last-child::after { display: none; }
	.process-steps h3 { margin-top: 0; }
}

/* Sector tiles: presentation only. No labels were added — the six names are
   already self-explanatory, and new copy here would undo the section-depth
   gain from Sprint #004. The weight comes from surface, accent and type. */
.sector-tile > a {
	background: var(--rd-surface);
	border-left-width: 4px;
	padding-block: var(--rd-space-4);
	box-shadow: 0 1px 2px rgba(18, 32, 46, 0.04);
}
.sector-tile > a:hover,
.sector-tile > a:focus-visible {
	border-color: var(--rd-primary);
	box-shadow: var(--rd-shadow);
	transform: translateY(-2px);
}
.sector-name { font-size: 1.14rem; }
.sector-go { font-size: 1.1rem; }
/* The roomier tile padding is a desktop gain and a mobile cost: at 375px the six
   tiles stack, so it added ~96px and pushed the section depth back from 1.7 to
   1.8 screens — undoing part of what Sprint #004 bought. Kept tight below 900. */
@media (max-width: 900px) {
	.sector-tile > a { padding-block: var(--rd-space-3); }
}
@media (max-width: 480px) {
	.sector-tile > a { padding: var(--rd-space-3); }
}

/* Entry-point marker on the services list. A sequence label, not a ranking:
   the other five rows keep identical type, weight, spacing and link treatment. */
.service-entry-tag {
	display: inline-block;
	margin-left: var(--rd-space-2);
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	background: var(--rd-navy-tint);
	border: 1px solid var(--rd-border);
	color: var(--rd-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.12em;
	white-space: nowrap;
}

/* Contact page details block. */
.contact-details { margin-bottom: var(--rd-space-5); padding: var(--rd-space-4); background: var(--rd-surface-2); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); }
.contact-list { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--rd-space-2) var(--rd-space-4); margin: 0; }
.contact-list dt { font-weight: 700; color: var(--rd-muted); font-size: var(--rd-fs-small); }
.contact-list dd { margin: 0; font-weight: 600; overflow-wrap: break-word; }
.contact-list a { color: var(--rd-accent-ink); font-weight: 700; }
@media (max-width: 560px) {
	.contact-list { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
	.contact-list dd { margin-bottom: var(--rd-space-2); }
}

@media (max-width: 900px) {
	.decision-factors { grid-template-columns: minmax(0, 1fr); gap: var(--rd-space-3); }
}

/* --- Atlas component presentation (Sprint #006) ---------------------------
   Content, wording and semantics are untouched throughout this block; only the
   weight of the packaging changes. */

/* Direct answer. It was a card inside a card — surface, full border, left rule
   and 24px padding — which made a 1.076-word page and a 2.524-word page look
   like the same document template. The GEO/direct-answer text is unchanged;
   it now reads as a lead paragraph under a label rather than as a box. */
.authority-main .atlas-summary {
	background: none;
	border: 0;
	border-left: 3px solid var(--rd-primary);
	border-radius: 0;
	padding: 0 0 0 var(--rd-space-4);
	margin: var(--rd-space-4) 0 var(--rd-space-5);
}
.authority-main .atlas-summary .badge {
	background: none;
	border: 0;
	padding: 0;
	color: var(--rd-accent-ink);
	font-size: 0.72rem;
	letter-spacing: 0.11em;
}
.authority-main .atlas-summary > p:last-child {
	font-size: var(--rd-fs-lead);
	line-height: 1.55;
	color: var(--rd-text);
}

/* Myth / reality. The correction was carried on a full pink field per item,
   which shouted across a page whose authority comes from being measured — and
   in dark mode a light error background is the loudest thing on screen. Same
   two statements, same order, same ✕/✓ semantics: now a neutral surface with
   restrained labels doing the colour work. */
.atlas-warning-item {
	background: var(--rd-surface-2);
	border: 1px solid var(--rd-border);
	border-left: 3px solid var(--rd-border);
	padding: var(--rd-space-3) var(--rd-space-4);
}
.atlas-warning-myth,
.atlas-warning-fact { display: flex; gap: 0.55rem; align-items: baseline; max-width: none; }
.atlas-warning-myth { color: var(--rd-text); font-weight: 650; }
.atlas-warning-fact { color: var(--rd-text); font-weight: 650; }
.atlas-warning-myth > span[aria-hidden],
.atlas-warning-fact > span[aria-hidden] {
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	border: 1px solid currentColor;
	line-height: 1.5;
}
.atlas-warning-myth > span[aria-hidden] { color: var(--rd-error); }
.atlas-warning-fact > span[aria-hidden] { color: var(--rd-success); }

/* Tables scroll inside their own region rather than pushing the document. */
.table-scroll { overflow-x: auto; margin: var(--rd-space-4) 0; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin: 0; min-width: 32rem; }
.table-scroll:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; border-radius: 4px; }

/* --- Belgeler decision hub -------------------------------------------------
   Four independent routes, deliberately without arrows, step numbers or any
   visual sequencing: presenting them as stages would assert a universal path
   that does not exist. Each card answers "is this me?" on its own. */
.hub-routes { list-style: none; margin: 0 0 var(--rd-space-5); padding: 0; display: grid; gap: var(--rd-space-3); }
.hub-route > a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface-2);
	border: 1px solid var(--rd-border);
	border-left: 3px solid var(--rd-border);
	border-radius: var(--rd-radius-sm);
	text-decoration: none;
	color: var(--rd-text);
	transition: border-color var(--rd-ease), background var(--rd-ease);
}
.hub-route > a:hover,
.hub-route > a:focus-visible { border-left-color: var(--rd-primary); background: var(--rd-surface); }
.hub-route-name { font-weight: 750; font-size: 1.05rem; letter-spacing: -0.015em; }
.hub-route-when { color: var(--rd-muted); font-size: var(--rd-fs-small); max-width: none; }

.hub-sectors { list-style: none; margin: 0 0 var(--rd-space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--rd-space-2); }
.hub-sectors a {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	background: var(--rd-surface-2);
	border: 1px solid var(--rd-border);
	border-radius: 999px;
	font-weight: 650;
	font-size: var(--rd-fs-small);
	color: var(--rd-text);
	text-decoration: none;
	transition: border-color var(--rd-ease), color var(--rd-ease);
}
.hub-sectors a:hover, .hub-sectors a:focus-visible { border-color: var(--rd-primary); color: var(--rd-accent-ink); }

.hub-cta { margin-top: var(--rd-space-5); padding-top: var(--rd-space-4); border-top: 1px solid var(--rd-border); }
.hub-cta h2 { font-size: var(--rd-fs-h3); }

/* --- Theme control ---------------------------------------------------------
   Light is the brand default; this switches to dark on request and the choice
   is remembered. Deliberately understated — an icon-sized control that reads
   as a utility, not a second call to action next to the CTA it sits beside. */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	border-radius: var(--rd-radius-sm);
	color: var(--rd-muted);
	cursor: pointer;
	padding: 0;
	transition: color var(--rd-ease), background var(--rd-ease);
}
.theme-toggle:hover { color: var(--rd-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
.theme-toggle-icon { display: inline-flex; }
/* One icon at a time: sun means "you are in dark, go light", moon the reverse. */
.theme-toggle .theme-toggle-icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon--sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon--moon { display: none; }

/* Header instance: 38px square, icon only, no chrome. */
.theme-toggle--header { width: 38px; height: 38px; flex: 0 0 auto; }

/* Off-canvas instance: a labelled row, so the control is discoverable on a
   screen where there is no room for an unexplained icon in the header. */
.nav-theme-row {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3) 0;
	border-bottom: 1px solid var(--rd-border);
}
.nav-theme-label { font-weight: 650; font-size: 1.05rem; color: var(--rd-text); }
.theme-toggle--nav {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--rd-border);
	color: var(--rd-text);
	font-weight: 650;
	font-size: 0.95rem;
	min-height: 44px;
}
.theme-toggle--nav:hover { background: var(--rd-navy-tint); }

@media (max-width: 900px) {
	.nav-theme-row { display: flex; }
	.theme-toggle--header { display: none; }
}