/* --------------------------------------------------------------------------
   City landing — Сахновщина / Кегичёвка / Берестин.
   Ported from the Claude Design source, scoped under .scity so the generic
   class names never collide with the theme base or the other city templates.
   Site header/footer come from the theme; the source's own header CSS is dropped.
   -------------------------------------------------------------------------- */

.scity {
	background: #fdfdfb;
	color: #010106;
	font-family: 'Manrope', sans-serif;
}
.scity a { text-decoration: none; color: #026537; }
.scity a:hover { color: #0e2018; }
.scity .serif { font-family: 'Cormorant Garamond', serif; font-weight: 500; }

.scity .fr { width: 100%; overflow: hidden; background: #fdfdfb; box-sizing: border-box; }
.scity .inner { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 88px 96px 96px; }

.scity .klabel {
	font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
	color: #026537; display: inline-flex; align-items: center; gap: 16px;
}
.scity .klabel::before { content: ""; width: 44px; height: 1px; background: #026537; }

.scity .b1 {
	display: inline-block; background: #026537; color: #fff; font-size: 14px; font-weight: 600;
	padding: 16px 34px; border-radius: 100px;
}
.scity .b1:hover { background: #0e2018; color: #fff; }

.scity .ghero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.scity h1.hero { font-size: 58px; line-height: 1.05; color: #010106; margin: 24px 0 0; }
.scity .painline { font-size: 26px; color: #010106; padding: 20px 0; border-top: 1px solid rgba(19, 42, 33, .16); }

.scity .gintro { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; }
.scity .gabout { display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: start; }
.scity .g3s { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 40px; }
.scity .gmeet { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.scity .g4st { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; }
.scity .gfaq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }

/* responsive — mirrors the source breakpoints */
@media (max-width: 1100px) {
	.scity .inner { padding: 56px 48px 64px; }
	.scity .ghero { grid-template-columns: 1fr !important; gap: 48px; }
	.scity h1.hero { font-size: 48px; }
	.scity .gintro { grid-template-columns: 1fr !important; gap: 32px; }
	.scity .quoteq { font-size: 34px; }
}

@media (max-width: 1024px) {
	.scity .inner { padding: 56px 40px 64px; }
	.scity .gabout { grid-template-columns: 1fr !important; gap: 36px; }
	.scity .gabout img { height: 420px !important; object-position: center 18%; }
	.scity .gmeet { grid-template-columns: 1fr !important; gap: 36px; }
	.scity .gmeet > div:last-child { margin-top: 0 !important; }
	.scity .g4st { grid-template-columns: 1fr 1fr !important; }
	.scity .g3s { grid-template-columns: 1fr !important; gap: 0; }
	.scity .gfaq { grid-template-columns: 1fr !important; gap: 0; }
}

@media (max-width: 700px) {
	.scity .inner { padding: 44px 20px 52px; }
	.scity h1.hero { font-size: 44px; line-height: 1; }
	.scity .painline { font-size: 21px; padding: 16px 0; }
	.scity .painline:last-of-type { border-bottom: none !important; padding-bottom: 0 !important; }
	.scity .heroimg { height: 300px !important; }
	.scity .badge { position: static !important; margin: 0 !important; border-radius: 0 0 12px 12px; }
	.scity .btns a { width: 100% !important; }
	.scity .cityname { font-size: 34px !important; }
	.scity .h2r { font-size: 30px !important; }
	.scity .quoteq { font-size: 26px !important; line-height: 1.32 !important; }
	.scity .gabout img { height: 340px !important; }
	.scity .g4st { grid-template-columns: 1fr !important; gap: 26px; }
	.scity .gfaq h3 { font-size: 16px !important; }
	.scity .klabel { font-size: 11px; letter-spacing: .18em; }
	.scity .klabel::before { width: 28px; }
	.scity .ctasec { padding: 72px 20px !important; }
	.scity .ctasec a { width: 100% !important; max-width: 340px; }
	.scity .citysec { padding: 40px 24px 44px !important; }
	.scity .citysec .cityname { margin-top: 12px !important; }
	.scity .introsec .inner { padding-top: 44px !important; padding-bottom: 44px !important; }
	.scity .quotesec { padding: 36px 24px 66px !important; }
	.scity .g4st { grid-template-columns: 1fr !important; }
}