/* --------------------------------------------------------------------------
   City landing — Психотерапевт в Харькове.
   Ported from the Claude Design source (!Хрьков.dc.html), scoped under .kcity
   so the design's generic class names (.sec, .in, .h2, .b1 …) never collide
   with the theme base styles or the other city templates. Site header/footer
   come from the theme, so the source's own header/nav CSS is dropped here.
   -------------------------------------------------------------------------- */

.kcity {
	background: #fdfdfb;
	color: #010106;
	font-family: 'Manrope', sans-serif;
}

.kcity a { text-decoration: none; color: #026537; }
.kcity a:hover { color: #0e2018; }
.kcity .serif { font-family: 'Cormorant Garamond', serif; font-weight: 500; }

/* section shell */
.kcity .sec { padding: 96px 24px; }
.kcity .in { max-width: 1264px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* kicker label */
.kcity .kl {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #026537;
	display: inline-flex;
	align-items: center;
	gap: 16px;
}
.kcity .kl::before { content: ""; width: 44px; height: 1px; background: #026537; }
.kcity .kld { color: #9fcdaa; }
.kcity .kld::before { background: #9fcdaa; }

/* headings + copy */
.kcity .h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 46px; line-height: 1.1; margin: 18px 0 0; color: #010106; }
.kcity .h2w { color: #fff; }
.kcity .kh-docname { font-size: 52px; }
.kcity .kh-workquote { font-size: 54px; }
.kcity .kh-philquote { font-size: 38px; line-height: 1.3; }
.kcity .lead { font-size: 17px; line-height: 1.65; margin: 20px 0 0; max-width: 680px; color: #010106; }
.kcity .leadw { color: #c9d2c2; }

/* buttons */
.kcity .b1 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #026537; color: #fff; font-size: 14px; font-weight: 600; padding: 16px 34px; border-radius: 100px; }
.kcity .b1:hover { background: #0e2018; color: #fff; }
.kcity .b2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #026537; color: #026537; font-size: 14px; font-weight: 600; padding: 15px 33px; border-radius: 100px; }
.kcity .b2:hover { background: #0e2018; border-color: #0e2018; color: #fff; }

/* hero */
.kcity .ghero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.kcity .ghero > div { min-width: 0; }
.kcity h1.hero { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 62px; line-height: 1.08; color: #010106; margin: 22px 0 0; }
.kcity .sub { font-size: 16px; line-height: 1.7; color: #010106; margin-top: 26px; max-width: 520px; }
.kcity .stats { display: flex; gap: 56px; margin-top: 56px; border-top: 1px solid rgba(19, 42, 33, .16); padding-top: 32px; }
.kcity .sv { font-family: 'Cormorant Garamond', serif; font-size: 40px; line-height: 1; color: #010106; }
.kcity .sl { font-size: 12px; color: #010106; margin-top: 8px; line-height: 1.5; }
.kcity .hph { position: relative; }
.kcity .hph .ph { height: 560px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -18px rgba(19, 42, 33, .35), 0 12px 24px -12px rgba(19, 42, 33, .18); }
.kcity .cap { position: absolute; left: 24px; bottom: 24px; background: rgba(253, 253, 251, .95); border-radius: 12px; padding: 14px 20px; }
.kcity .cap b { display: block; font-size: 14px; color: #010106; }
.kcity .cap span { font-size: 12px; color: #010106; }

/* grids */
.kcity .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(19, 42, 33, .16); }
.kcity .pcard { background: #fdfdfb; padding: 34px 32px; }
.kcity .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.kcity .gab { display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: start; }
.kcity .g3s { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.kcity .stepc { padding: 0 40px; border-left: 1px solid rgba(19, 42, 33, .18); }
.kcity .stepc:first-child { padding-left: 0; border-left: none; }
.kcity .fcard { border: 1px solid rgba(159, 205, 170, .28); border-radius: 16px; padding: 40px 44px; background: rgba(159, 205, 170, .07); }
.kcity .rv { background: #fdfdfb; border: 1px solid rgba(19, 42, 33, .14); border-radius: 16px; padding: 34px 36px; }

/* faq */
.kcity details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.kcity details summary::-webkit-details-marker { display: none; }
.kcity details .chev { flex: none; transition: transform .2s; }
.kcity details[open] .chev { transform: rotate(45deg); }
.kcity details:last-of-type { border-bottom: none !important; }

/* responsive — mirrors the source breakpoints */
/* Collapse to one column. !important is required because the source markup
   carries inline `grid-template-columns` on several blocks (.gab, .g2t, .gnot,
   reviews .g3), and inline styles beat plain media-query rules. */
@media (max-width: 1100px) {
	.kcity .sec { padding: 64px 24px; }
	.kcity .in { padding: 0; }
	.kcity .ghero, .kcity .gab { grid-template-columns: 1fr !important; gap: 40px !important; }
	.kcity .g2 { grid-template-columns: 1fr !important; gap: 40px !important; }
	.kcity .g3 { grid-template-columns: 1fr 1fr !important; }
	.kcity .g3s { grid-template-columns: 1fr !important; gap: 28px; }
	.kcity .stepc { padding: 0 0 0 28px; border-left: 1px solid rgba(19, 42, 33, .18); }
	.kcity .stepc:first-child { padding-left: 28px; border-left: 1px solid rgba(19, 42, 33, .18); }
	.kcity h1.hero { font-size: 44px; }
	.kcity .h2 { font-size: 36px; }
	.kcity .g2t { gap: 36px !important; }
	.kcity .hph .ph { height: 520px; }
	.kcity .hph .ph img { object-position: center 12%; }
}

@media (max-width: 820px) {
	.kcity .g2t { grid-template-columns: 1fr !important; gap: 28px !important; }
	/* credentials become a single column with grey dividers between rows */
	.kcity .gcred { grid-template-columns: 1fr !important; gap: 0 !important; }
	.kcity .gcred > div { border-bottom: 1px solid rgba(19, 42, 33, .16); padding: 16px 0; }
	.kcity .gcred > div:first-child { padding-top: 0; }
	.kcity .gcred > div:last-child { border-bottom: none; padding-bottom: 0; }
	.kcity .g3 { grid-template-columns: 1fr !important; }
	.kcity .pricerow { flex-direction: column; align-items: flex-start !important; gap: 24px !important; }
	.kcity .pricerow a { width: 100%; box-sizing: border-box; }
	.kcity .gnot { grid-template-columns: 1fr !important; gap: 0 !important; }
}

@media (max-width: 700px) {
	.kcity .sec { padding: 52px 20px; }
	.kcity h1.hero { font-size: 44px; line-height: 1; }
	.kcity .h2 { font-size: 30px; }
	.kcity .kh-docname { font-size: 44px; line-height: 0.95; }
	.kcity .kh-workquote { font-size: 40px; }
	.kcity .kh-phil { padding-bottom: 82px; }
	.kcity .kh-philquote { font-size: 34px; line-height: 1.1; }
	.kcity .fcard { padding: 28px 24px; }
	.kcity .rv { padding: 26px 24px; }
	.kcity .btns a { width: 100% !important; }
	.kcity .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
	.kcity .sv { font-size: 26px; }
	.kcity .sl { font-size: 11px; }
	.kcity .hph .ph { height: 420px; }
	.kcity .pcard { padding: 26px 24px; }
	.kcity .stepc, .kcity .stepc:first-child { padding-left: 20px; }
	.kcity .lead { font-size: 16px; }
	.kcity .b1, .kcity .b2 { width: 100%; box-sizing: border-box; }
	.kcity .cap { left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; }
	.kcity .faqq { font-size: 16px !important; }
	.kcity details summary { gap: 14px; }
	.kcity .pricehead { font-size: 32px !important; }
	.kcity .pricetag { font-size: 26px !important; }
	.kcity .herosec { padding-top: 22px !important; }
	.kcity .sp50 { height: 12px !important; }
	.kcity .signrow:last-of-type { border-bottom: none !important; }
}