/* =============================================================================
   Serander — site styles (v4, "açık ve kurumsal"). The contract is DESIGN.md.
   White ground, ink type, one red for calls and the brand. WhatsApp green appears
   only as WhatsApp's own icon (and the send button inside the WhatsApp sheet).
   Photos are few, large and real; the map is greyscale.
   ========================================================================== */

:root {
	--white: #ffffff;
	--paper: #f4f5f3;
	--ink: #14171a;
	--ink-2: #2a2f34;
	--gri: #555c63;          /* secondary text: 6.6:1 on white, 6.1:1 on --paper */
	--line: #e1e4e0;
	--line-strong: #b8bdc1;
	--red: #d3202c;          /* white text on it: 5.2:1 */
	--red-dark: #ae1520;
	--red-tint: #fbeaeb;
	--lamba: #ffb020;         /* roof beacon: the "open" dot and small accents on asphalt only */
	--wa: #1faa53;           /* the WhatsApp mark itself */
	--wa-solid: #25d366;
	--wa-ink: #05290f;
	--night: #14171a;        /* footer ground */
	--night-2: #1e2226;
	--night-muted: #a9afb4;  /* 8.0:1 on --night */

	--f-display: "Archivo Display", "Arial Narrow", "Roboto Condensed", sans-serif;
	--f-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
	--gutter: clamp(16px, 4.4vw, 48px);
	--max: 1240px;
	--head-h: 76px;
	--r: 12px;
	--r-ui: 10px;
	--ease: cubic-bezier(.2, .7, .2, 1);

	--bg: var(--white);
	--fg: var(--ink);
	--muted: var(--gri); /* avoid-ai-design-ignore: C9 — 6.6:1 on white; the scanner pairs the footer value with this ground */
	--focus: var(--red);
}
@media (max-width: 1023px) { :root { --head-h: 64px; } }

/* The one dark ground: the footer (and the lightbox). */
.foot {
	--bg: var(--night);
	--fg: #f2f3f0;
	--muted: var(--night-muted); /* avoid-ai-design-ignore: C9 — footer only: 8.0:1 on --night */
	--line: rgba(255, 255, 255, .14);
	--line-strong: rgba(255, 255, 255, .34);
	--focus: #fff;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked { overflow: hidden; }
body {
	margin: 0; overflow-x: clip; background: var(--white); color: var(--ink);
	font: 400 1.0625rem/1.6 var(--f-body);
	font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { display: block; }
main:focus { outline: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl { margin: 0; }
p, li, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: #fff; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { max-width: 760px; } /* left edge stays on the page grid, under the hero title */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; font-weight: 700; border-radius: var(--r-ui); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Display face (82 % wide): only for numbers and the wordmark. Its space is 0.15em, so open it. */
.num { font-family: var(--f-display); font-weight: 800; font-variant-numeric: tabular-nums; word-spacing: .12em; letter-spacing: .005em; }

/* ---------- Sections and headings ---------- */
.sec { padding-block: clamp(56px, 6vw, 88px); }
.sec--paper { background: var(--paper); }
/* Two white sections in a row get a hairline; a colour change needs none. */
.sec:not(.sec--paper) + .sec:not(.sec--paper) { border-top: 1px solid var(--line); }
.sec__head { margin-bottom: clamp(28px, 3.4vw, 40px); max-width: 720px; }
.sec__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6); }
.sec__title,
.prose h2 {
	font: 700 clamp(1.75rem, 2.8vw, 2.4rem)/1.12 var(--f-body);
	letter-spacing: -.022em; text-wrap: balance; color: var(--fg);
}
.sec__lead { font-size: clamp(1.0625rem, 1.2vw, 1.125rem); color: var(--muted); max-width: 60ch; margin-top: var(--s3); }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--fg); white-space: nowrap; }
.more .icon { width: 18px; height: 18px; color: var(--red); transition: transform .2s var(--ease); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.more:hover .icon { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 52px; padding: 0 1.3rem; border: 0; border-radius: var(--r-ui);
	font: 600 1rem/1 var(--f-body); text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn .icon { width: 1.25em; height: 1.25em; }
.btn--call { background: var(--red); color: #fff; }
.btn--call:hover { background: var(--red-dark); }
.btn--ghost,
.btn--wa { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover,
.btn--wa:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--wa .icon { color: var(--wa); }
.foot .btn--ghost,
.foot .btn--wa { background: transparent; color: var(--fg); }
.foot .btn--ghost:hover,
.foot .btn--wa:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn--solid.btn--wa { background: var(--wa-solid); color: var(--wa-ink); box-shadow: none; }
.btn--solid.btn--wa .icon { color: currentColor; }
.btn--solid.btn--wa:hover { background: #1fbe5b; }
.btn--xl { min-height: 58px; padding: 0 1.5rem; font-size: 1.0625rem; }
.btn--wide { width: 100%; }
.btn__num { font: 800 1.25rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; }
.btn--xl .btn__num { font-size: 1.35rem; }
.btn[aria-busy="true"] { cursor: progress; opacity: .8; }
@media (max-width: 359px) { .btn--xl { padding: 0 .9rem; gap: .45rem; font-size: 1rem; } .btn--xl .btn__num { font-size: 1.2rem; } }

/* Gallery filters */
.chip {
	min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--line-strong); border-radius: 999px;
	background: transparent; color: var(--fg); font: 600 .9375rem/1 var(--f-body); white-space: nowrap; cursor: pointer;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip span { font-weight: 500; opacity: .65; margin-left: .25em; font-variant-numeric: tabular-nums; }

/* Pick: radio buttons styled as chips (WhatsApp sheet, tyre request) */
.pick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pick__opt { position: relative; display: inline-flex; }
.pick__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pick__opt span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	border-radius: 999px; border: 1.5px solid var(--line-strong);
	font: 600 .9375rem/1 var(--f-body); color: var(--ink); background: var(--white);
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
	pointer-events: none;
}
.pick__opt:hover span { border-color: var(--ink); }
.pick__opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Message preview: an outgoing WhatsApp bubble */
.preview { display: grid; gap: 6px; }
.preview__label { font: 600 .875rem/1.2 var(--f-body); color: var(--muted); }
.preview__text {
	justify-self: start; max-width: 100%; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
	background: #d9fdd3; color: #0b2416; font-size: .9375rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere;
}

/* ---------- Brand: tyre-and-road mark + wordmark (inline SVG, colours from here) ---------- */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo { display: block; height: 44px; width: auto; overflow: visible; }
.logo .lg-hub { fill: #fff; stroke: var(--ink); }
.logo .lg-tread { stroke: #fff; fill: none; }
.logo .lg-word { fill: var(--ink); }
.logo .lg-sub { fill: var(--red); }
.foot .logo { height: 46px; }
.foot .logo .lg-hub { stroke: #eef0ec; }
.foot .logo .lg-tread { stroke: var(--night); }
.foot .logo .lg-word { fill: #fff; }
.foot .logo .lg-sub { fill: #ff6b74; }
@media (max-width: 1023px) { .masthead .logo { height: 38px; } }

/* ---------- Masthead ---------- */
/* Solid on purpose: backdrop-filter would make it the containing block of the fixed phone menu inside it. */
.masthead { position: sticky; top: 0; z-index: 60; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.masthead__bar { height: var(--head-h); display: flex; align-items: center; gap: var(--s6); }
.masthead__end { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.masthead__call {
	display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
	border-radius: var(--r-ui); background: var(--red); color: #fff; text-decoration: none;
	font: 800 1.2rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em;
	transition: background-color .16s var(--ease), opacity .2s var(--ease), visibility .2s;
}
.masthead__call:hover { background: var(--red-dark); }
.masthead__call .icon { width: 20px; height: 20px; }
.masthead__ara { display: none; font: 600 .95rem/1 var(--f-body); }
.masthead__toggle {
	display: none; width: 46px; height: 46px; border-radius: var(--r-ui);
	border: 1.5px solid var(--line-strong); background: var(--white); color: var(--ink);
	align-items: center; justify-content: center; cursor: pointer;
}
.masthead__toggle .icon { width: 24px; height: 24px; }
.masthead__toggle .when-open,
.menu-open .masthead__toggle .when-closed { display: none; }
.menu-open .masthead__toggle .when-open { display: block; }

/* Desktop navigation: inline links, two dropdowns */
.nav__list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
	display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px;
	border: 0; border-radius: var(--r-ui); background: transparent; color: var(--ink); text-decoration: none;
	font: 600 1rem/1 var(--f-body); cursor: pointer;
}
.nav__link:hover,
.nav__link[aria-expanded="true"] { background: var(--paper); }
.nav__link[aria-current="page"],
.nav__link.is-here { color: var(--red); }
.nav__chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__sub {
	position: absolute; top: calc(100% + 14px); left: -12px; padding: 12px;
	border-radius: 16px; background: var(--white);
	box-shadow: 0 0 0 1px var(--line), 0 28px 56px -12px rgba(20, 23, 26, .28);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
/* A bridge over the 14 px gap, so the pointer can travel from the link into the panel. */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__link[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Hizmetler: photo card for yol yardım + four rows */
.navsvc { display: grid; grid-template-columns: 236px 380px; gap: 12px; }
.navfeat { position: relative; display: flex; align-items: flex-end; min-height: 312px; border-radius: 12px; overflow: hidden; background: var(--night); color: #fff; text-decoration: none; isolation: isolate; }
.navfeat__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; transition: transform .5s var(--ease); }
.navfeat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 23, 26, 0) 25%, rgba(20, 23, 26, .82) 62%, rgba(20, 23, 26, .96)); }
.navfeat:hover .navfeat__img { transform: scale(1.04); }
.navfeat__body { display: grid; gap: 6px; justify-items: start; padding: 18px; }
.navfeat__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--red); font: 700 .75rem/1.2 var(--f-body); }
.navfeat__tag .icon { width: 14px; height: 14px; }
.navfeat b { font: 800 1.45rem/1.1 var(--f-body); letter-spacing: -.02em; }
.navfeat small { font-size: .875rem; line-height: 1.45; color: #d9dcd8; }
.navfeat__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 .875rem/1.2 var(--f-body); }
.navfeat__go .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.navfeat:hover .navfeat__go .icon { transform: translateX(3px); }
.navsvc__list { list-style: none; display: grid; align-content: stretch; gap: 2px; }
.navrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 14px; height: 100%; padding: 12px 12px 12px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s var(--ease); }
.navrow:hover,
.navrow[aria-current="page"] { background: var(--paper); }
.navrow__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); color: var(--red); background: var(--white); }
.navrow__icon .icon { width: 22px; height: 22px; }
.navrow__txt { display: grid; gap: 3px; }
.navrow b { font-weight: 700; line-height: 1.25; }
.navrow small { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.navrow__go { width: 18px; height: 18px; color: var(--line-strong); transition: color .15s var(--ease), transform .15s var(--ease); }
.navrow:hover .navrow__go { color: var(--red); transform: translateX(2px); }
.navrow[aria-current="page"] b { color: var(--red-dark); }

/* Bölgeler: list + map */
.navreg { display: grid; grid-template-columns: 300px 336px; gap: 16px; align-items: center; }
/* 1024-1199 px: the panel would run past the window on the right; open it further left. */
@media (min-width: 1024px) and (max-width: 1199px) { .nav__sub--regions { left: -150px; } }
.navreg__head { display: flex; justify-content: space-between; padding: 4px 12px 8px; font: 600 .8125rem/1.2 var(--f-body); color: var(--muted); }
.navreg__list { list-style: none; display: grid; }
.navreg__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .15s var(--ease); }
.navreg__row:hover,
.navreg__row:focus-visible,
.navreg__row[aria-current="page"] { background: var(--paper); }
.navreg__name { font-weight: 600; }
.navreg__row[aria-current="page"] .navreg__name { color: var(--red-dark); }
.navreg__km { font: 800 .975rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; color: var(--gri); }
.navreg__note { margin-top: 8px; padding: 10px 12px 2px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.navreg__map { border-radius: 12px; }
.navreg .navreg__map svg { width: 100%; height: auto; }
.navreg__map:empty { aspect-ratio: 1000 / 1309; background: var(--paper); }
.navreg .navreg__map .m-label { font-size: 38px; stroke-width: 9px; }
.navreg .navreg__map .m-label--muted { font-size: 30px; }
.navreg .navreg__map .m-air-label { font-size: 25px; stroke-width: 7px; }
.navreg .navreg__map .m-pin-label { font-size: 34px; stroke-width: 8px; }
.navreg__map .m-area { transition: fill .15s var(--ease), stroke .15s var(--ease); }
.nav__lines { display: none; }

/* Phones and tablets: the menu is a sheet under the bar; groups open in place */
@media (max-width: 1023px) {
	.masthead__num { display: none; }
	.masthead__ara { display: inline; }
	.masthead__call { padding: 0 14px; }
	/* Under 900 px the hero's buttons or the dock always show call + WhatsApp: no second "Ara". */
	@media (max-width: 899px) { .masthead__call { display: none; } }
	.masthead__toggle { display: inline-flex; }
	.nav {
		position: fixed; inset: var(--head-h) 0 0 0; z-index: 59;
		background: var(--white); padding: var(--s2) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
		overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line);
		display: none; flex-direction: column; gap: var(--s5);
	}
	.menu-open .nav { display: flex; }
	.menu-open { overflow: hidden; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { border-bottom: 1px solid var(--line); }
	.nav__link { width: 100%; height: 58px; padding: 0 4px; justify-content: space-between; font: 700 1.25rem/1 var(--f-body); letter-spacing: -.01em; border-radius: 0; }
	.nav__link:hover,
	.nav__link[aria-expanded="true"] { background: transparent; }
	.nav__chev { width: 22px; height: 22px; }
	.nav__sub { position: static; width: auto; padding: 0 0 var(--s3); background: transparent; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; display: none; }
	.nav__sub::before { display: none; }
	.nav__link[aria-expanded="true"] + .nav__sub { display: block; }
	.navsvc { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.navfeat { min-height: 0; align-items: center; }
	.navfeat__body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 16px; }
	.navfeat__tag { grid-row: 1; grid-column: 2; }
	.navfeat b { grid-row: 1; font-size: 1.2rem; }
	.navfeat small { grid-column: 1 / -1; }
	.navfeat__go { display: none; }
	.navfeat::before { background: linear-gradient(90deg, rgba(20, 23, 26, .95) 35%, rgba(20, 23, 26, .55)); }
	.navrow { padding: 10px 4px; }
	.navreg { grid-template-columns: minmax(0, 1fr); }
	.navreg__head { padding: 0 4px 6px; }
	.navreg__row { padding: 11px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
	.navreg__row:hover { background: transparent; }
	.navreg__note { border-top: 0; padding: 10px 4px 0; }
	.navreg__map { display: none; }
	.nav__lines { display: grid; gap: var(--s2); margin-top: auto; }
	.nav__line2 { text-align: center; color: var(--muted); font-size: .95rem; padding: 6px; text-decoration: none; }
	.nav__line2 b { color: var(--ink); font: 800 1.1rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; }
}

/* ---------- Hero (home and inner pages): asphalt band, the job photo on its right edge ---------- */
/* The photos are night-time phone shots; on asphalt they read as one scene instead of a framed snapshot. */
.hero {
	--bg: var(--night); --fg: #f4f5f2; --muted: #b3b9be; --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .34); --focus: #fff;
	position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg);
	padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px);
}
.hero__grid { display: grid; gap: var(--s6); align-items: center; }
.hero__text { position: relative; z-index: 1; }
@media (min-width: 960px) {
	.hero { padding-block: 0; }
	.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(520px, 72vh, 660px); }
	.hero--page .hero__grid { min-height: clamp(420px, 56vh, 500px); }
	.hero__text { padding-block: var(--s8); }
	/* The photo runs from the middle of the page to the right edge of the window, full band height. */
	.hero__photo { position: absolute; inset: 0 0 0 auto; width: min(50%, 860px); z-index: 0; }
	.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0, rgba(20, 23, 26, .55) 18%, rgba(20, 23, 26, 0) 46%); pointer-events: none; }
}
.hero__photo { margin: 0; overflow: hidden; background: var(--night-2); }
.hero__photo img,
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Below 960 px the photo is a full-width band under the text. */
@media (max-width: 959px) {
	.hero { padding-bottom: 0; }
	.hero__photo { position: relative; margin-inline: calc(-1 * var(--gutter)); height: clamp(220px, 52vw, 380px); }
	.hero__photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 38%; background: linear-gradient(var(--night), rgba(20, 23, 26, 0)); }
	.hero--plain { padding-bottom: clamp(32px, 6vw, 48px); }
}

.hero__claim {
	display: block; font: 800 clamp(2.5rem, 4.6vw, 4.1rem)/1.02 var(--f-body);
	letter-spacing: -.035em; max-width: 17ch; text-wrap: balance;
}
.hero__kw { display: block; margin-top: var(--s4); max-width: 40ch; font: 400 clamp(1.0625rem, 1.35vw, 1.2rem)/1.5 var(--f-body); color: var(--muted); letter-spacing: 0; }
.hero__num { display: inline-grid; gap: 8px; margin-top: var(--s6); text-decoration: none; color: var(--fg); }
.hero__num small { display: inline-flex; align-items: center; gap: 8px; font: 600 .875rem/1 var(--f-body); color: var(--muted); }
.hero__num small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lamba); box-shadow: 0 0 0 4px rgba(255, 176, 32, .18); }
.hero__num b { font: 800 clamp(2.6rem, 4.8vw, 3.9rem)/.95 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; letter-spacing: .005em; }
.hero__num:hover b { color: #ffd2d5; }
.actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero .btn--ghost,
.hero .btn--wa { background: rgba(255, 255, 255, .06); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.hero .btn--ghost:hover,
.hero .btn--wa:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px #fff; }
.hero .btn--wa .icon { color: var(--wa-solid); }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) 18px; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); font: 500 .9rem/1.35 var(--f-body); color: var(--fg); }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
/* Below 1300 px the three facts do not fit one line: a clean column instead of a ragged 2 + 1. */
@media (max-width: 1299px) { .hero__facts { flex-direction: column; gap: var(--s2); } }
.hero__facts .icon { width: 19px; height: 19px; color: var(--lamba); }
@media (min-width: 960px) and (max-width: 1199px) { .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .hero__photo { width: 44%; } }
@media (max-width: 760px) {
	.actions .btn { flex: 1 1 100%; }
	.hero__facts { gap: var(--s2); flex-direction: column; }
}

/* Inner pages */
.hero--page .hero__title { font: 800 clamp(2.1rem, 4vw, 3.4rem)/1.04 var(--f-body); letter-spacing: -.03em; max-width: 16ch; margin-top: var(--s4); text-wrap: balance; overflow-wrap: anywhere; }
.hero__lead { margin-top: var(--s4); max-width: 52ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); color: var(--muted); }
.hero__badge { margin-top: var(--s5); }
.km-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-ui); background: rgba(255, 255, 255, .07); color: var(--fg); font-size: .95rem; line-height: 1.35; box-shadow: inset 0 0 0 1px var(--line); }
.km-badge b { font: 800 1.15rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; }
.km-badge .icon { width: 20px; height: 20px; color: var(--lamba); }
.hero--404 .hero__title { max-width: 14ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font: 500 .875rem/1.3 var(--f-body); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .55; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
	.hero--home .hero__text > * { animation: rise .6s var(--ease) both; }
	.hero--home .hero__text > :nth-child(2) { animation-delay: .05s; }
	.hero--home .hero__text > :nth-child(3) { animation-delay: .1s; }
	@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
}

/* ---------- Services: four photo cards ---------- */
.svc-row { list-style: none; display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .svc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } .svc-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-row li { display: flex; }
.svc { display: flex; flex-direction: column; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.svc:hover { box-shadow: 0 0 0 1px var(--line-strong), 0 14px 34px rgba(20, 23, 26, .12); transform: translateY(-2px); }
.svc__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.svc__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc:hover .svc__photo img { transform: scale(1.04); }
.svc__body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: 34px var(--s5) var(--s5); }
.svc__icon { position: absolute; top: -26px; left: var(--s5); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--red); color: #fff; box-shadow: 0 0 0 4px var(--white); }
.svc__icon .icon { width: 28px; height: 28px; }
.svc__name { font: 700 1.2rem/1.25 var(--f-body); letter-spacing: -.012em; }
.svc__line { color: var(--muted); font-size: .975rem; line-height: 1.5; }
.svc__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s3); font-weight: 600; font-size: .95rem; color: var(--red-dark); }
.svc__go .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.svc:hover .svc__go .icon { transform: translateX(3px); }
.sec--paper .svc { box-shadow: 0 1px 2px rgba(20, 23, 26, .06); }

/* ---------- How it works: three photos, three sentences ---------- */
.steps { list-style: none; display: grid; gap: var(--s6); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .steps .steps__photo { aspect-ratio: 4 / 3; } }
.steps__photo { margin: 0 0 var(--s4); aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--paper); }
.steps__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.steps__title { display: flex; align-items: baseline; gap: 10px; font: 700 1.2rem/1.25 var(--f-body); letter-spacing: -.01em; }
.steps__no { flex: none; font: 800 1.2rem/1 var(--f-display); color: var(--red); font-variant-numeric: tabular-nums; }
.steps__text { margin-top: 6px; color: var(--muted); font-size: 1rem; line-height: 1.55; max-width: 44ch; }
.photos .steps__photo { margin: 0; }

/* ---------- Coverage: district list + map ---------- */
.coverage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
@media (min-width: 980px) { .coverage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; } }
.coverage__map .map { max-width: 470px; margin-inline: auto; }
@media (min-width: 980px) { .coverage__map .map { margin-inline: auto 0; } }
.coverage__shop { display: grid; gap: var(--s3); margin-top: var(--s6); padding: var(--s5); border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.coverage__shop p { color: var(--muted); }
.coverage__shop b { color: var(--ink); font-weight: 600; }
.coverage__shop small,
.contact__addr small { display: block; margin-top: 2px; font-size: .9375rem; color: var(--muted); }
.coverage__go,
.contact__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.maps-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.maps-link:hover { text-decoration-color: currentColor; }
.maps-link .icon { width: 19px; height: 19px; color: var(--red); }
.foot__maps { margin-left: var(--s3); white-space: nowrap; }
.foot__maps .icon { color: #fff; }

/* District list (the same component on home, service asides and region pages) */
.areas { container-type: inline-size; }
.areas__head { display: flex; justify-content: space-between; gap: var(--s3); padding: 0 34px var(--s2) 4px; font: 600 .8125rem/1.2 var(--f-body); color: var(--muted); }
.areas__list { list-style: none; border-top: 1px solid var(--line); }
.areas__list li { border-bottom: 1px solid var(--line); }
@container (min-width: 520px) {
	.areas__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
	.areas__head { display: none; }
}
.areas__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: var(--s3); padding: 14px 4px; text-decoration: none; color: var(--ink); }
.areas__name { font: 600 1.0625rem/1.2 var(--f-body); }
.areas__km { font: 800 1.05rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; color: var(--ink-2); }
.areas__row .icon { width: 18px; height: 18px; color: var(--line-strong); transition: color .15s var(--ease), transform .15s var(--ease); }
.areas__row:hover .areas__name { text-decoration: underline; text-underline-offset: 4px; }
.areas__row:hover .icon { color: var(--red); transform: translateX(2px); }
.regions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 980px) {
	.regions--compact { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
	.regions--compact .regions__head { margin-bottom: 0; }
}

/* ---------- Map (greyscale; red only for the shop and the page's own district) ---------- */
.map { margin: 0; border-radius: var(--r); overflow: hidden; background: #e9eef1; position: relative; container-type: inline-size; box-shadow: inset 0 0 0 1px var(--line); }
.map svg { width: 100%; height: auto; }
.map__credit { display: block; padding: 8px 12px 9px; background: var(--white); border-top: 1px solid var(--line); font: 500 .75rem/1.2 var(--f-body); color: var(--gri); }
.map .m-sea { fill: #dbe3e8; }
.map .m-land { fill: #f7f8f6; stroke: #d9ddd8; stroke-width: 1.2; }
.map .m-area { fill: #eceeea; stroke: #9aa1a6; stroke-width: 1.6; }
.map .m-area[data-hl] { fill: #f8dfe1; stroke: var(--red); stroke-width: 3; }
.map--focus .m-area:not([data-hl]) { fill: #f1f2ef; stroke: #b9bfc3; }
.map .m-airport { fill: #e2e5e1; stroke: #8c9398; stroke-width: 1.4; stroke-dasharray: 5 4; }
.map .m-plane { fill: var(--ink); stroke: #fff; stroke-width: 1.5; paint-order: stroke; }
.map .m-air-label { font: 700 16px/1 var(--f-body); letter-spacing: .02em; fill: var(--ink-2); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.map .m-road { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.map .m-road--e5 { stroke-width: 6; }
.map .m-road--tem { stroke-width: 5; }
.map .m-road--o7 { stroke-width: 4; }
.map .m-roadcase { fill: none; stroke: #b4babe; stroke-linecap: round; stroke-linejoin: round; }
.map .m-shield { font: 800 18px/1 var(--f-display); }
.map .m-shield rect { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.map .m-shield text { fill: #fff; }
.map .m-label { font: 700 19px/1 var(--f-body); letter-spacing: .01em; fill: var(--ink-2); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.map .m-label--muted { fill: #737a80; font-size: 15px; }
.map .m-pin { fill: var(--red); stroke: #fff; stroke-width: 3; }
.map .m-pin-ring { fill: none; stroke: var(--red); stroke-width: 2; opacity: .5; }
.map .m-pin-label { font: 700 18px/1 var(--f-body); fill: var(--red-dark); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
@container (max-width: 640px) {
	.map .m-label { font-size: 27px; stroke-width: 7px; }
	.map .m-label--muted { font-size: 22px; }
	.map .m-shield,
	.map .m-pinwrap { transform: scale(1.4); }
	.map .m-road--e5 { stroke-width: 9; }
	.map .m-road--tem { stroke-width: 7.5; }
	.map .m-road--o7 { stroke-width: 6; }
}

/* ---------- Photos on inner pages and the gallery ---------- */
.photos { list-style: none; display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
.photos li:nth-child(3) { display: none; }
@media (min-width: 760px) { .photos li:nth-child(3) { display: block; } }
.photos a { display: block; border-radius: var(--r); overflow: hidden; }
.photos img { transition: transform .6s var(--ease); }
.photos a:hover img { transform: scale(1.03); }

/* ---------- Tyre request ---------- */
.tyre { display: grid; gap: var(--s6); }
@media (min-width: 980px) { .tyre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; } }
.tyre__info { display: grid; gap: var(--s5); align-content: start; }
.tyre__head { margin-bottom: 0; }
.plate { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--s2) var(--s4); padding: var(--s5) var(--s5) var(--s4); border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.plate__part { display: grid; gap: 8px; }
.plate__part b,
.plate__sep,
.plate__rest { font: 800 clamp(1.9rem, 6vw, 3.2rem)/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.plate__sep { color: var(--line-strong); }
.plate__rest { color: #6f757b; }
.plate__part small { font-size: .8125rem; color: var(--muted); }
.plate__unit::before { content: ", "; }
@media (max-width: 559px) {
	.plate { gap: var(--s2) var(--s3); padding: var(--s4); }
	.plate__part b, .plate__sep { font-size: clamp(1.9rem, 10vw, 2.6rem); }
	.plate__rest { display: none; }
	.plate__part small { font-size: .75rem; line-height: 1.3; }
	.plate__unit { display: block; }
	.plate__unit::before { content: none; }
}
.tyre__hint { color: var(--muted); max-width: 52ch; }
.size { display: grid; gap: var(--s5); padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(20, 23, 26, .06); }
.size__title { font: 700 1.35rem/1.2 var(--f-body); letter-spacing: -.012em; }
.size__group legend { margin-bottom: var(--s3); font: 600 .9375rem/1.2 var(--f-body); }
.size__row { display: flex; align-items: center; gap: var(--s2); }
.size__f input {
	width: 88px; height: 58px; padding: 0 10px; border-radius: var(--r-ui); border: 1.5px solid var(--line-strong);
	background: var(--white); color: var(--ink); font: 800 1.55rem/1 var(--f-display); text-align: center; font-variant-numeric: tabular-nums;
}
.size__f input::placeholder { color: #6f757b; }
.size__f input:focus { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 1px; }
.size__sep { font: 800 1.5rem/1 var(--f-display); color: var(--muted); }
@media (max-width: 380px) { .size__f input { width: 74px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s5); }
@media (min-width: 980px) {
	.faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
	.faq__head { position: sticky; top: calc(var(--head-h) + 32px); margin-bottom: 0; }
}
.faq__call { margin-top: var(--s5); }
.prose details { border-top: 1px solid var(--line); }
.prose details:last-of-type { border-bottom: 1px solid var(--line); }
.prose summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
	padding: 16px 2px; font: 600 1.0625rem/1.4 var(--f-body);
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
	content: ""; flex: none; width: 14px; height: 14px; margin-right: 6px;
	background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
	transition: transform .2s var(--ease);
}
.prose details[open] > summary::after { transform: rotate(45deg); }
.prose summary:hover { color: var(--red-dark); }
.prose details > :not(summary) { padding: 0 2px 18px; color: var(--muted); max-width: 64ch; }
.prose details > :not(summary) + :not(summary) { margin-top: -8px; }

/* ---------- Article (service / region pages) ---------- */
.article { display: grid; gap: var(--s7); }
@media (min-width: 980px) {
	.article { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s8); align-items: start; }
	.article__aside { position: sticky; top: calc(var(--head-h) + 24px); }
}
.article__aside { display: grid; gap: var(--s4); }
@media (max-width: 979px) { .article__aside .aside-areas, .article__aside .aside-help { display: none; } }
.aside-areas { display: grid; gap: var(--s3); }
.prose { font-size: 1.0625rem; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 700 1.15rem/1.3 var(--f-body); margin-top: 1.5em; }
.prose p, .prose li { max-width: 62ch; }
.prose a { color: var(--red-dark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose ul,
.prose ol { padding-left: 0; list-style: none; display: grid; gap: 10px; max-width: 64ch; }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* Metrobüs stops on the region pages: names you can say on the phone, as compact tags. */
.prose ul.stops { display: flex; flex-wrap: wrap; gap: 8px; }
.prose ul.stops > li { padding: 6px 12px 6px 28px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; line-height: 1.35; max-width: none; }
.prose ul.stops > li::before { left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: none; box-shadow: inset 0 0 0 2.5px var(--red); }
.prose ul.stops + * { margin-top: 1.2em; }
.prose ol { counter-reset: li; }
.prose ol > li { position: relative; padding-left: 34px; counter-increment: li; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; top: .1em; font: 800 1.1rem/1.4 var(--f-display); color: var(--red); }
.prose strong { font-weight: 700; color: var(--fg); }
.prose blockquote,
.prose .note { padding: var(--s4) var(--s5); border-radius: var(--r-ui); background: var(--paper); color: var(--fg); }
.prose blockquote p { max-width: none; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.prose--legal h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
.prose--legal h3 { font-size: 1.05rem; }
.prose__updated { margin-top: 2.5em !important; font-size: .875rem; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th,
.prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose figure img { border-radius: var(--r); }
.prose figcaption { margin-top: 8px; font-size: .875rem; color: var(--muted); }

.card { padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.sec--paper .card { box-shadow: none; }
.aside-card { display: grid; gap: var(--s3); }
.aside-card__title { font: 700 1.3rem/1.2 var(--f-body); letter-spacing: -.012em; }
.aside-card__text { color: var(--muted); font-size: .975rem; line-height: 1.5; margin-bottom: var(--s1); }
.aside-card__line2 { text-align: center; font-size: .9375rem; color: var(--muted); }
.aside-card__line2 a { color: var(--ink); font: 800 1.05rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; text-decoration: none; }
.landmarks { display: grid; gap: var(--s3); }
.landmarks__title { display: flex; align-items: center; gap: 8px; font: 700 1.2rem/1.2 var(--f-body); }
.landmarks__title .icon { color: var(--red); }
.landmarks__sub { color: var(--muted); font-size: .9375rem; }
.landmarks__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s1); }
.landmarks__list li { padding: 6px 10px; border-radius: 999px; background: var(--paper); font-size: .875rem; }

/* ---------- Contact card, callback, form ---------- */
.callback { display: grid; gap: var(--s6); }
@media (min-width: 980px) {
	.callback { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
	.callback__head { margin-bottom: 0; }
}
.contact { display: grid; gap: var(--s3); align-content: start; }
.contact__title { font: 700 1.2rem/1.2 var(--f-body); }
.contact__addr,
.contact__hours { display: flex; gap: var(--s3); align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.contact__addr .icon,
.contact__hours .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--red); }
.contact__lines { list-style: none; display: grid; margin: var(--s1) 0 var(--s2); border-top: 1px solid var(--line); }
.contact__lines li { border-bottom: 1px solid var(--line); }
.contact__lines a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; color: var(--fg); text-decoration: none; }
.contact__lines a:hover b { color: var(--red); }
.contact__lines small { font-size: .9375rem; color: var(--muted); }
.contact__lines b { font: 800 1.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; }
.form { display: grid; gap: var(--s5); }
.form__grid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; }
.field label { font: 600 .9375rem/1.2 var(--f-body); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input,
.field select,
.field textarea {
	width: 100%; min-height: 54px; padding: 12px 14px; border-radius: var(--r-ui); border: 1px solid var(--line-strong);
	background: var(--white); color: var(--ink); font-size: 1.0625rem;
	outline: 2px solid transparent; outline-offset: 1px; transition: border-color .15s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input::placeholder,
.field textarea::placeholder { color: #666c72; }
.field input:hover,
.field select:hover { border-color: var(--ink); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ink); outline-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--red); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .form__foot { grid-template-columns: auto 1fr; align-items: center; gap: var(--s5); } .form__foot .btn--wide { width: auto; padding-inline: 2rem; } }
.form__legal { font-size: .875rem; color: var(--muted); }
.form__legal a { color: inherit; }
.form__msg:empty { display: none; }
.form__msg { padding: 14px 16px; border-radius: var(--r-ui); font-weight: 600; }
.form__msg[data-state="ok"] { background: #e3f6e9; color: #0d4d24; }
.form__msg[data-state="err"] { background: #fde5e6; color: #8a0f18; }

/* Contact page */
/* Four equal cards; the actions sit on one line at the bottom of every card. */
.reach-cards { list-style: none; display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .reach-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .reach-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } }
.reach-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: 24px; border-radius: var(--r); background: var(--white); box-shadow: 0 1px 2px rgba(20, 23, 26, .06); }
.reach-card--main { background: var(--night); color: #f2f3f0; --muted: var(--night-muted); --fg: #f2f3f0; --focus: #fff; }
.reach-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 12px; background: var(--red-tint); color: var(--red); }
.reach-card--main .reach-card__icon { background: var(--red); color: #fff; }
.reach-card__icon--wa { background: #e7f9ee; color: #128c4a; }
.reach-card__icon .icon { width: 26px; height: 26px; }
.reach-card__label { font: 600 .875rem/1.2 var(--f-body); color: var(--muted); }
.reach-card__num { font: 800 clamp(1.6rem, 2.1vw, 1.9rem)/1.05 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; color: var(--fg); text-decoration: none; white-space: nowrap; }
.reach-card__num:hover { color: var(--red); }
.reach-card--main .reach-card__num:hover { color: #ffd2d5; }
.reach-card__value { font: 700 1.125rem/1.35 var(--f-body); }
.reach-card__value--addr { font-weight: 600; font-size: 1rem; line-height: 1.5; }
.reach-card__note { font-size: .875rem; line-height: 1.45; color: var(--muted); }
.reach-card__go { margin-top: 10px; width: 100%; }
.reach-card--main .btn--call { background: var(--red); }

.reach { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 980px) { .reach { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6); align-items: start; } }
.reach__form { display: grid; gap: var(--s3); }
.reach__title { font: 700 clamp(1.4rem, 2.2vw, 1.75rem)/1.15 var(--f-body); letter-spacing: -.02em; }
.reach__hint { color: var(--muted); max-width: 56ch; }
.reach__form .form { margin-top: var(--s2); }
.reach__side { display: grid; gap: var(--s3); }
@media (min-width: 980px) { .reach__form, .reach__more { grid-column: 1; } .reach__side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--head-h) + 24px); } }
.reach__more { display: grid; gap: var(--s6); padding-top: var(--s3); }
.reach__more .prose h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.reach__maps { font-size: .9375rem; }
.reach-info { display: grid; gap: var(--s6); }
@media (min-width: 980px) { .reach-info { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: start; } }
.hours { display: grid; margin-top: var(--s4); border-top: 1px solid var(--line); }
.hours > div { display: flex; justify-content: space-between; gap: var(--s4); padding: 14px 2px; border-bottom: 1px solid var(--line); }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; color: var(--muted); text-align: right; }
.reach__review { font-size: .9375rem; color: var(--muted); }
.reach__review a { color: var(--fg); font-weight: 600; }

/* Google map on request (contact page): our map until the visitor asks for theirs. */
.gmap { position: relative; border-radius: var(--r); overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.gmap .map { border-radius: 0; box-shadow: none; }
.gmap__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: 12px 14px; border-top: 1px solid var(--line); }
.gmap__note { font-size: .8125rem; color: var(--muted); }
.gmap iframe { display: block; width: 100%; height: clamp(380px, 52vh, 520px); border: 0; }

/* ---------- Gallery page ---------- */
/* One even grid of 4:5 crops: phone shots of every shape line up; the full frame opens in the lightbox. */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.gallery__intro { margin-bottom: var(--s5); }
.masonry { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.masonry__item[hidden] { display: none; }
.masonry__item a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--night-2); }
.masonry__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.masonry__item a::after { content: ""; position: absolute; inset: 0; background: rgba(20, 23, 26, 0); transition: background-color .2s var(--ease); }
.masonry__item a:hover img { transform: scale(1.04); }
.masonry__item a:hover::after { background: rgba(20, 23, 26, .12); }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 14, 16, .96); color: #fff; }
.lightbox::backdrop { background: rgba(12, 14, 16, .96); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { display: grid; gap: 12px; justify-items: center; padding: 64px 16px 72px; }
.lightbox__fig img { max-width: min(94vw, 1400px); max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: var(--r); }
.lightbox__fig figcaption { font-size: .9375rem; color: #d3d6d2; text-align: center; max-width: 60ch; }
.lightbox__btn { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__btn--close { top: 14px; right: 14px; }
.lightbox__btn--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 14px; transform: none; } }
.lightbox__count { position: fixed; top: 28px; left: 20px; font-size: .875rem; font-variant-numeric: tabular-nums; color: #b9bdb9; }

/* ---------- WhatsApp sheet ---------- */
.sheet { --focus: #128c4a; width: 100%; max-width: 560px; max-height: 94dvh; margin: auto auto 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.sheet::backdrop { background: rgba(12, 14, 16, .6); }
.sheet[open] { display: block; }
.sheet__box { display: flex; flex-direction: column; max-height: 94dvh; border-radius: 16px 16px 0 0; background: var(--white); box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); overflow: hidden; }
@media (min-width: 640px) { .sheet { margin: auto; } .sheet__box { max-height: min(92dvh, 820px); border-radius: 16px; } }
.sheet__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--line); }
.sheet__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e7f9ee; color: #128c4a; }
.sheet__mark .icon { width: 26px; height: 26px; }
.sheet__title { font: 700 1.2rem/1.2 var(--f-body); letter-spacing: -.01em; }
.sheet__sub { margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.sheet__x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.sheet__x:hover { background: var(--line); }
.sheet__body { display: grid; gap: 22px; padding: 18px 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
.sheet__group { display: grid; gap: 10px; }
.sheet__group legend { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 700 1rem/1.2 var(--f-body); }
.sheet__group legend .field__opt { font-weight: 400; }
.sheet__no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .75rem/1 var(--f-body); }

/* 1. What happened: icon tiles, two or three to a row */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; }
.tile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tile__box { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--white); font: 600 .9375rem/1.2 var(--f-body); pointer-events: none; transition: box-shadow .15s var(--ease), background-color .15s var(--ease); }
.tile__box .icon { flex: none; width: 26px; height: 26px; color: var(--gri); }
.tile:hover .tile__box { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tile input:checked + .tile__box { background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red); }
.tile input:checked + .tile__box .icon { color: var(--red); }
.tile input:focus-visible + .tile__box { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 2. Where: come to me / I will come to the shop */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper); }
.seg__opt { position: relative; display: flex; }
.seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 10px; border-radius: 9px; font: 600 .9375rem/1.2 var(--f-body); color: var(--ink-2); text-align: center; pointer-events: none; transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.seg__opt .icon { flex: none; width: 20px; height: 20px; }
.seg__opt input:checked + span { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 23, 26, .14), 0 0 0 1px var(--line); }
.seg__opt input:checked + span .icon { color: var(--red); }
.seg__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.sheet__where { display: grid; gap: 12px; }
.sheet__where[hidden] { display: none; }
.sheet__shop { justify-items: start; padding: 14px; border-radius: 12px; background: var(--paper); }
.sheet__shopaddr { display: flex; gap: 10px; line-height: 1.5; }
.sheet__shopaddr > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--red); }
.sheet__shopaddr b { display: block; font-weight: 700; }
.sheet__shopaddr small { display: block; margin-top: 2px; font-size: .875rem; color: var(--muted); }
.sheet__car { display: grid; gap: 12px; }
/* Two columns only while the tyre-size field is shown. */
@media (min-width: 480px) { .sheet__car:has([data-sheet-tyre]:not([hidden])) { grid-template-columns: 1.4fr 1fr; } }
.sheet__car [hidden] { display: none; }
.field--sheet input { min-height: 50px; }

/* Footer: send (wide) and call side by side */
.sheet__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
.sheet__send { width: 100%; }
.sheet__call { padding: 0 1.2rem; }
.sheet__tip { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.45; color: var(--muted); text-align: center; }
.sheet__tip a { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.sheet[open] .sheet__box { animation: sheet-in .26s var(--ease) both; }
	@keyframes sheet-in { from { transform: translateY(28px); } to { transform: none; } }
}
.loc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.loc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--gri); box-shadow: inset 0 0 0 1px var(--line); }
.loc__icon .icon { width: 22px; height: 22px; }
.loc__title { font-weight: 600; line-height: 1.25; }
.loc__msg { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.loc__btn { min-height: 44px; padding: 0 14px; border-radius: var(--r-ui); border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 600 .9375rem/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.loc__btn:hover { background: var(--ink); color: #fff; }
.loc__btn:disabled { opacity: .55; cursor: progress; }
.loc__btn[hidden] { display: none; }
.loc[data-state="ok"] { background: #e8f8ee; box-shadow: inset 0 0 0 1px #a9dfbd; }
.loc[data-state="ok"] .loc__icon { background: #128c4a; color: #fff; box-shadow: none; }
.loc[data-state="ok"] .loc__msg { color: #0d4d24; }
.loc[data-state="err"],
.loc[data-state="na"] { background: #fff5e3; box-shadow: inset 0 0 0 1px #f2c56b; }
.loc[data-state="err"] .loc__msg,
.loc[data-state="na"] .loc__msg { color: #6b4300; }
.loc[data-state="na"] { grid-template-columns: 40px minmax(0, 1fr); }
@media (prefers-reduced-motion: no-preference) {
	.loc[data-state="busy"] .loc__icon .icon { animation: spin 1.1s linear infinite; }
	@keyframes spin { to { transform: rotate(360deg); } }
}
@media (max-width: 420px) { .loc { grid-template-columns: 40px minmax(0, 1fr); } .loc__btn { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.foot { background: var(--bg); color: var(--fg); padding-block: 0 20px; font-size: .9375rem; }
/* Closing call band: the last thing on every page is the number. */
.foot__cta { display: grid; gap: 18px 32px; align-items: center; padding-block: clamp(28px, 3.6vw, 40px); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .foot__cta { grid-template-columns: minmax(0, 1fr) auto; } }
.foot__ctatitle { font: 800 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--f-body); letter-spacing: -.025em; color: #fff; }
.foot__ctasub { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; color: var(--muted); }
.foot__ctago { display: flex; flex-wrap: wrap; gap: 10px; }
.foot__ctago .btn--wa { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.foot__ctago .btn--wa:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.foot__ctago .btn--wa .icon { color: var(--wa-solid); }
/* Under 900 px the fixed dock already carries call + WhatsApp; the band keeps only its words. */
@media (max-width: 899px) { .foot__ctago { display: none; } }
.foot__ctasub .foot__dot { transform: translateY(-1px); }
.foot__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lamba); box-shadow: 0 0 0 4px rgba(255, 176, 32, .18); }

.foot__grid { display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: clamp(28px, 3.6vw, 40px); }
.foot__brand { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; justify-items: start; }
@media (min-width: 1100px) {
	.foot__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); }
	.foot__brand { grid-column: auto; }
}
@media (min-width: 640px) and (max-width: 1099px) { .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot__about { max-width: 40ch; color: var(--muted); line-height: 1.55; }
.foot__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.foot__badges li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); font: 600 .8125rem/1.2 var(--f-body); color: #e6e8e4; }
.foot__badges .icon { width: 15px; height: 15px; color: var(--lamba); }
.foot__h { margin-bottom: 10px; font: 600 .8125rem/1.2 var(--f-body); color: var(--muted); }
.foot__col ul,
.foot__links { list-style: none; display: grid; gap: 2px; }
.foot__col--regions ul { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 24px; }
.foot__col a,
.foot__links a,
.foot__legal a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; color: #e6e8e4; text-decoration: none; }
.foot__col a:hover,
.foot__links a:hover,
.foot__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__links .icon { width: 17px; height: 17px; color: var(--muted); }
.foot__links b { font: 800 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; }
.foot__addr { font-style: normal; color: #e6e8e4; line-height: 1.5; }
.foot__landmark { margin: 4px 0 8px; font-size: .8125rem; line-height: 1.45; color: var(--muted); max-width: 36ch; }
@media (max-width: 639px) {
	.foot__col, .foot__shop { grid-column: 1 / -1; }
	.foot__col ul, .foot__col--regions ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.foot__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot__legal a { padding: 8px 0; }

/* ---------- Dock (phones) ---------- */
.dock { display: none; }
@media (max-width: 899px) {
	.foot { padding-bottom: calc(16px + 74px + env(safe-area-inset-bottom)); }
	.dock {
		position: fixed; inset: auto 0 0 0; z-index: 55; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s2);
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
		box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(20, 23, 26, .08); transition: transform .28s var(--ease);
	}
	.dock.is-hidden { transform: translateY(110%); }
	.dock a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: var(--r-ui); text-decoration: none; }
	.dock .icon { width: 24px; height: 24px; }
	.dock span { display: grid; line-height: 1.05; }
	.dock b { font-weight: 600; font-size: .95rem; }
	.dock small { font-size: .8125rem; color: var(--muted); }
	.dock__call { background: var(--red); color: #fff; }
	.dock__call small { font: 800 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; word-spacing: .12em; color: #fff; margin-top: 2px; }
	.dock__wa { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
	.dock__wa .icon { color: var(--wa); }
	.menu-open .dock { transform: translateY(110%); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media print {
	.masthead, .dock, .sheet { display: none !important; }
	.foot { background: #fff !important; color: #000 !important; }
}

/* Phones: the region list in the menu is one column (two columns overflowed at 390 px). */
/* Phones: service cards become rows (photo left), so four services fit about one screen. */
@media (max-width: 639px) {
	.svc { flex-direction: row; }
	.svc__photo { flex: none; position: relative; width: 112px; aspect-ratio: auto; }
	.svc__photo img { position: absolute; inset: 0; }
	.svc__body { align-content: center; }
	.svc__body { padding: var(--s4); gap: 4px; grid-template-rows: auto auto auto; }
	.svc__icon { display: none; }
	.svc__name { font-size: 1.1rem; }
	.svc__line { font-size: .9375rem; }
	.svc__go { margin-top: 4px; }
}

/* ---------- Biz gelelim ya da siz gelin ---------- */
/* Two panels with one anatomy: media (photo | map), title, sentence, two facts, actions. */
.modes { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .modes { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.mode { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.sec--paper .mode { box-shadow: 0 1px 2px rgba(20, 23, 26, .06), 0 0 0 1px rgba(20, 23, 26, .04); }
.mode__media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--night-2); }
.mode__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.mode__media--map { background: #dbe3e8; }
.mode__media .map { height: 100%; border-radius: 0; box-shadow: none; }
.mode__media .map svg { width: 100%; height: 100%; }
.map--zoom .m-label { font-size: 13px; stroke-width: 4px; }
.map--zoom .m-pin-label { font-size: 15px; stroke-width: 4px; }
.map--zoom .m-road--e5 { stroke-width: 5; }
@container (max-width: 640px) { .map--zoom .m-label { font-size: 15px; stroke-width: 4px; } .map--zoom .m-pinwrap { transform: none; } }
.mode__badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font: 700 .875rem/1 var(--f-body); box-shadow: 0 2px 10px rgba(20, 23, 26, .18); }
.mode__badge .icon { width: 18px; height: 18px; color: var(--red); }
.mode__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); }
.mode__title { font: 800 clamp(1.45rem, 2.2vw, 1.75rem)/1.1 var(--f-body); letter-spacing: -.025em; }
.mode__text { color: var(--muted); max-width: 54ch; }
.mode__facts { list-style: none; display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }
.mode__facts li { display: flex; align-items: flex-start; gap: 10px; }
.mode__facts .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--red); }
.mode__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
@media (max-width: 479px) { .mode__go .btn { flex: 1 1 100%; } .mode__media { aspect-ratio: 16 / 9; } }

/* "Yerinde / Dükkânda" on every service card */
.svc__modes { display: flex; flex-wrap: wrap; align-content: start; gap: 6px; margin-top: 6px; }
.svc__modes span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--paper); font: 600 .8125rem/1.2 var(--f-body); color: var(--ink-2); }
.svc__modes .icon { width: 15px; height: 15px; color: var(--red); }
.sec--paper .svc__modes span { background: #f1f2ef; }


.nw { white-space: nowrap; }

/* Phones: the four contact cards become compact rows (icon beside the label and number). */
@media (max-width: 639px) {
	.reach-card { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: none; column-gap: 14px; row-gap: 4px; padding: 18px; }
	.reach-card__icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
	.reach-card__icon .icon { width: 22px; height: 22px; }
	.reach-card > :not(.reach-card__icon) { grid-column: 2; }
	.reach-card__go { grid-column: 1 / -1 !important; margin-top: 8px; }
	.reach-card__num { font-size: 1.6rem; }
}

/* Coverage on home: one column of districts beside the map */
.areas--single .areas__list { display: block; }
.areas--single .areas__head { display: flex !important; }