/* ===== Palettes (switch via or params.theme) ===== */
:root{
/* ---- ТИПОГРАФИЧЕСКАЯ ШКАЛА. Других размеров в проекте быть не должно. ---- */
/* Значения повторяют то, что реально стояло на боевом сайте: H1 64,
H2 34, заголовок карточки 24, подзаголовок 20, текст 16, подпись 14,4.
Изменилась только нижняя граница: всё, что было 11–13,6 px, поднято
до 14 px. Крупная типографика не трогается — она клиентом принята. */
--t-display: clamp(2.5rem, 4.4vw, 4rem); /* 40 → 64 H1 */
--t-h2: clamp(1.75rem, 2.6vw, 2.125rem); /* 28 → 34 H2 */
--t-h3: 1.5rem; /* 24 — заголовки карточек */
--t-lead: 1.25rem; /* 20 — подзаголовок */
--t-body: 1rem; /* 16 — основной текст, как было */
--t-small: .9rem; /* 14,4 — самый частый размер подписи на сайте */
--t-micro: .875rem; /* 14 — нижняя граница, меньше нельзя */
--ink:#182728; --muted:#5d6b6b; --bg:#f7f3ed; --surface:#fff;
--line:rgba(24,39,40,.11);
--radius:20px; --shadow:0 16px 42px rgba(24,39,40,.10);
--brand:#19856f; --brand-dark:#106757; --brand-soft:#e4f3ee;
--accent:#c86c45; --accent-dark:#b15a36; --accent-soft:#f5e6da;
--deep:#0f5b4f;
}
[data-theme="teal"]{ --brand:#0e8aab; --brand-dark:#0b6e88; --brand-soft:#e1f2f6; --accent:#e5242b; --accent-dark:#c41c23; --accent-soft:#fce3e4; }
[data-theme="blue"]{ --brand:#1466a6; --brand-dark:#0f4f82; --brand-soft:#e3eef8; --accent:#ff6b5c; --accent-dark:#e8513f; --accent-soft:#ffe6e2; }
[data-theme="amber"]{ --brand:#0e8aab; --brand-dark:#0b6e88; --brand-soft:#e1f2f6; --accent:#e0a11e; --accent-dark:#c4881a; --accent-soft:#faecd0; }
[data-theme="green"]{ --brand:#19856f; --brand-dark:#106757; --brand-soft:#e4f3ee; --accent:#c86c45; --accent-dark:#b15a36; --accent-soft:#f5e6da; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
body{ margin:0; color:var(--ink); font-family:"Manrope",Arial,sans-serif; background:linear-gradient(180deg,#fffaf4,var(--bg)); }
body.modal-open{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; }
h1,h2,h3,h4{ margin:0; }
.wrap{ width:min(1180px,calc(100% - 32px)); margin:0 auto; }
section{ padding:38px 0; }
/* ===== Header ===== */
.site-header{ position:sticky; top:0; z-index:30; background:linear-gradient(135deg,#0f5b4f,#182728); box-shadow:0 14px 40px rgba(24,39,40,.18); }
.topbar{ border-bottom:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.85); font-size:var(--t-small); }
.topbar-inner{ display:flex; align-items:center; gap:16px; padding:8px 0; }
.topbar .schedule{ flex:1; }
.topbar-phone{ border:0; background:transparent; color:#fff; cursor:pointer; font-weight:600; }
.topbar-phone:hover{ text-decoration:underline; }
.socials{ display:flex; gap:8px; }
.socials .s{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:0; color:#fff; transition:transform .2s ease, filter .2s ease; }
.socials .s img{ width:15px; height:15px; display:block; margin:0; }
.socials .s:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.s-vb{ background:#8063c6; } .s-tg{ background:#3daee9; } .s-wa{ background:#35b96f; } .s-fb{ background:#2878d8; }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.logo{ background:transparent; padding:4px 0; margin-left:-14px; display:inline-flex; }
.logo img{ height:80px; width:auto; transform:scale(2); transform-origin:left center; }
.logo .logo-m{ display:none; }
.nav{ display:flex; flex-wrap:wrap; gap:2px; }
.nav a{ padding:8px 11px; border-radius:10px; color:rgba(255,255,255,.85); font-size:var(--t-micro); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.nav a:hover,.nav a.is-active{ background:rgba(255,255,255,.12); color:#fff; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.cta{ border:0; padding:12px 22px; border-radius:12px; color:#fff; font-weight:800; cursor:pointer; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); transition:filter .2s,transform .2s; }
.cta:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.nav-extra{ display:none; }
.header-phone{ display:none; color:#fff; font-weight:800; font-size:var(--t-body); white-space:nowrap; letter-spacing:.01em; }
.header-phone:hover{ text-decoration:underline; }
.menu-toggle{ display:none; width:46px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.08); cursor:pointer; }
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{ content:""; display:block; width:18px; height:2px; margin:3px auto; background:#fff; border-radius:9px; }
/* ===== Buttons ===== */
.btn-brand{ border:0; padding:13px 24px; border-radius:12px; color:#fff; font-weight:800; cursor:pointer; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); transition:filter .2s,transform .2s; }
.btn-brand:hover{ filter:brightness(1.05); transform:translateY(-1px); }
/* ===== Hero ===== */
.kicker{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--brand-dark); font-weight:800; font-size:var(--t-small); margin-bottom:16px; }
.kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); }
.lead{ color:var(--muted); font-size:var(--t-body); line-height:1.6; margin:16px 0 22px; max-width:560px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.chip{ display:flex; align-items:center; gap:9px; min-width:0; padding:12px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); font-weight:700; font-size:var(--t-small); overflow-wrap:anywhere; }
.chip .ic{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-dark); }
.hero-media{ position:relative; border-radius:22px; overflow:hidden; min-height:380px; box-shadow:var(--shadow); }
.hero-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-note{ position:absolute; left:16px; right:16px; bottom:16px; background:rgba(255,255,255,.94); border-radius:16px; padding:14px 16px; }
.hero-note b{ display:block; margin-bottom:4px; } .hero-note p{ margin:0; color:var(--muted); font-size:var(--t-small); }
/* ===== Section title ===== */
.sec-head{ margin-bottom:18px; }
.sec-head h2{ font-size:var(--t-h2); letter-spacing:-.01em; }
.sec-head p{ color:var(--muted); margin:8px 0 0; max-width:680px; line-height:1.55; }
/* ===== About ===== */
.about{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:28px; align-items:center; }
/* ===== Services ===== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.svc{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 10px 28px rgba(20,36,42,.06); transition:transform .25s,box-shadow .25s; }
.svc:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,36,42,.12); }
.svc-photo{ aspect-ratio:385/240; overflow:hidden; background:var(--brand-soft); }
.svc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.svc:hover .svc-photo img{ transform:scale(1.05); }
.svc-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.svc-body h3{ font-size:var(--t-body); }
.svc-body p{ margin:0; color:var(--muted); font-size:var(--t-small); line-height:1.5; flex:1; }
.more{ color:var(--brand-dark); font-weight:700; font-size:var(--t-small); }
/* ===== Reasons ===== */
.reasons{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.reason{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; transition:transform .25s,box-shadow .25s; }
.reason:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,36,42,.10); }
.reason .ic{ flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent-soft),#fff); border:1px solid var(--accent-soft); color:var(--accent-dark); font-weight:800; font-size:var(--t-lead); }
.reason p{ margin:0; color:var(--muted); font-size:var(--t-small); line-height:1.5; }
/* ===== Chips row (cities / districts) ===== */
/* ===== Pricing ===== */
/* ===== Reviews ===== */
.reviews{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.review{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.review .stars{ color:#e9a83a; letter-spacing:2px; } .review p{ line-height:1.6; }
.review .auth{ display:flex; align-items:center; gap:12px; }
.review .av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-dark); font-weight:800; text-transform:uppercase; }
.review .auth b{ display:block; } .review .auth span{ color:var(--muted); font-size:var(--t-small); }
/* ===== FAQ ===== */
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px; }
.faq summary{ cursor:pointer; font-weight:800; }
.faq p{ margin:10px 0 0; color:var(--muted); line-height:1.55; }
.faq.is-scroll{ max-height:560px; overflow-y:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:var(--brand) transparent; }
.faq.is-scroll::-webkit-scrollbar{ width:8px; }
.faq.is-scroll::-webkit-scrollbar-thumb{ background:var(--brand); border-radius:999px; }
.faq.is-scroll::-webkit-scrollbar-track{ background:rgba(20,36,42,.06); border-radius:999px; }
/* Map (placeholder, скрыта пока нет исполнителей) */
/* ===== Blog ===== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.blog-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 10px 28px rgba(20,36,42,.06); }
.blog-card .tag{ align-self:flex-start; padding:4px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:var(--t-micro); font-weight:700; margin-bottom:10px; }
.blog-card h3{ font-size:var(--t-body); line-height:1.35; margin-bottom:8px; }
.blog-card p{ margin:0 0 12px; color:var(--muted); font-size:var(--t-small); line-height:1.5; flex:1; }
/* ===== Inner pages ===== */
.inner-hero{ padding-top:34px; }
.breadcrumbs{ font-size:var(--t-small); color:var(--muted); margin-bottom:12px; }
.breadcrumbs a:hover{ color:var(--brand-dark); }
.inner-hero h1{ font-size:var(--t-display); letter-spacing:-.01em; }
.inner-media{ border-radius:20px; overflow:hidden; box-shadow:var(--shadow); max-height:420px; }
.inner-media img{ width:100%; height:100%; object-fit:cover; }
.rte{ line-height:1.7; color:#26343a; max-width:820px; }
.rte h2{ margin:28px 0 10px; } .rte h3{ margin:22px 0 8px; }
.rte p{ margin:0 0 14px; } .rte ul,.rte ol{ margin:0 0 14px; padding-left:20px; } .rte li{ margin:6px 0; }
.cta-band{ text-align:center; background:var(--brand-soft); border-radius:22px; padding:34px; }
.cta-band h2{ margin-bottom:16px; }
/* ===== Footer ===== */
.site-footer{ background:#143e38; color:rgba(255,255,255,.88); margin-top:0; border-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:28px; padding:42px 0 24px; }
.footer-brand p{ color:rgba(255,255,255,.72); font-size:var(--t-small); line-height:1.55; max-width:320px; }
.logo-foot{ margin-bottom:16px; display:inline-flex; align-items:center; } .logo-foot img{ height:40px; width:auto; display:block; }
.site-footer .socials{ margin-top:12px; }
.footer-col h3{ color:#fff; margin-bottom:12px; font-size:var(--t-small); }
.footer-col ul{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; }
.footer-col a,.footer-col li{ color:rgba(255,255,255,.75); font-size:var(--t-small); }
.footer-col a:hover{ color:#fff; }
.footer-legal{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); }
.footer-operator{ display:grid; gap:4px; min-width:0; font-size:var(--t-small); line-height:1.45; }
.footer-operator strong{ color:#fff; font-size:var(--t-small); }
.footer-operator span{ color:rgba(255,255,255,.68); }
.footer-legal nav{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px 18px; }
.footer-legal nav a{ color:rgba(255,255,255,.78); font-size:var(--t-small); font-weight:600; }
.footer-legal nav a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.lang-switch{ border-top:1px solid rgba(255,255,255,.12); padding:16px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lang-switch .lbl{ font-size:var(--t-small); color:rgba(255,255,255,.7); }
.lang-dd{ position:relative; display:inline-block; }
.lang-dd-toggle{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid #d7dde2; color:#2a343a; font-weight:700; font-size:var(--t-small); cursor:pointer; }
.lang-dd-toggle:hover{ background:#f4f6f8; border-color:#c7cfd5; }
.lang-caret{ font-size:var(--t-micro); opacity:.85; transition:transform .2s ease; }
.lang-dd.open .lang-caret{ transform:rotate(180deg); }
.lang-dd-menu{ list-style:none; margin:0; padding:6px; position:absolute; left:0; bottom:calc(100% + 8px); min-width:190px; background:#fff; border:1px solid #e0e5e9; border-radius:14px; box-shadow:0 18px 44px rgba(20,36,42,.16); display:none; z-index:25; }
.lang-dd.open .lang-dd-menu{ display:block; }
.lang-dd-menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#3a434a; font-weight:700; font-size:var(--t-small); }
.lang-dd-menu a:hover{ background:#f0f3f5; color:var(--brand-dark); }
.lang-dd-menu a.is-active{ background:var(--brand); color:#fff; }
.flag{ width:26px; height:18px; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.3); flex:0 0 auto; }
.flag-bg{ background:linear-gradient(#fff 0 33.33%,#00966e 33.33% 66.66%,#d62612 66.66% 100%); }
.footer-copy{ padding:16px 0 28px; color:rgba(255,255,255,.6); font-size:var(--t-small); border-top:1px solid rgba(255,255,255,.12); }
/* ===== Structured information pages ===== */
.utility-page,.service-place-page,.service-place-detail,.taxonomy-page{ background:#f7f4ef; }
.utility-hero,.service-place-hero{ padding:54px 0 60px; background:#edf3ef; border-bottom:1px solid var(--line); }
.utility-hero-grid,.service-place-hero-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(360px,.8fr); gap:64px; align-items:center; }
.utility-hero-copy h1,.service-place-hero h1{ max-width:720px; font-size:var(--t-display); line-height:1.04; letter-spacing:0; }
.utility-kicker{ display:inline-flex; align-items:center; gap:9px; margin:4px 0 18px; color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.utility-kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 5px rgba(25,133,111,.11); }
.utility-lead,.service-place-hero p{ max-width:700px; margin:18px 0 0; color:#526161; font-size:var(--t-body); line-height:1.72; }
.utility-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.utility-actions>a:not(.btn-line){ color:inherit; font-weight:900; }
.utility-hero-visual,.service-place-hero-image{ position:relative; min-height:390px; overflow:hidden; border-radius:8px; background:#dce9e3; box-shadow:0 18px 46px rgba(24,39,40,.12); }
.utility-hero-visual>img,.service-place-hero-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.utility-hero-visual::after{ content:""; position:absolute; inset:45% 0 0; background:linear-gradient(180deg,transparent,rgba(11,45,41,.68)); }
.utility-hero-visual>div{ position:absolute; z-index:1; left:20px; right:20px; bottom:18px; color:#fff; }
.utility-hero-visual strong{ display:block; margin-bottom:4px; font-size:var(--t-body); }
.utility-hero-visual span{ display:block; max-width:390px; color:rgba(255,255,255,.85); font-size:var(--t-small); line-height:1.5; }
.utility-highlight,.service-place-process{ padding:64px 0; background:#fff; border-bottom:1px solid var(--line); }
.utility-section-head{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr); column-gap:46px; align-items:end; margin-bottom:26px; }
.utility-section-head>span{ grid-column:1/-1; margin-bottom:8px; color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.utility-section-head h2{ font-size:var(--t-display); line-height:1.1; letter-spacing:0; }
.utility-section-head p{ margin:0; color:#5a6868; line-height:1.65; }
.utility-factor-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.utility-factor-grid-three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.utility-factor-grid article{ min-height:205px; padding:24px; background:#fff; border-right:1px solid var(--line); }
.utility-factor-grid article:last-child{ border-right:0; }
.utility-factor-grid b{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand-dark); font-size:var(--t-micro); }
.utility-factor-grid h3{ margin-bottom:9px; font-size:var(--t-body); line-height:1.35; }
.utility-factor-grid p{ margin:0; color:#627070; font-size:var(--t-small); line-height:1.6; }
.contact-channels{ padding:58px 0 64px; background:#fff; border-bottom:1px solid var(--line); }
.contact-channels-inner{ position:relative; }
.contact-section-head{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,.8fr); gap:48px; align-items:end; margin-bottom:26px; }
.contact-section-head>div>span,.contact-request-copy>span{ display:block; margin-bottom:8px; color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.contact-section-head h2{ font-size:var(--t-display); line-height:1.1; }
.contact-section-head p{ margin:0; color:#5c6a69; line-height:1.65; }
.contact-channel-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.contact-channel-grid>a,.contact-channel-grid>button{ min-width:0; min-height:188px; display:flex; flex-direction:column; align-items:flex-start; padding:24px; border:1px solid var(--line); border-top:3px solid var(--brand); border-radius:8px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; box-shadow:0 12px 28px rgba(24,39,40,.06); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.contact-channel-grid>*:nth-child(2){ border-top-color:#42afa0; }
.contact-channel-grid>*:nth-child(3){ border-top-color:var(--accent); }
.contact-channel-top{ display:flex; align-items:center; gap:11px; margin-bottom:19px; }
.contact-channel-number{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; }
.contact-channel-label{ color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.contact-channel-grid strong{ max-width:100%; overflow-wrap:anywhere; font-size:var(--t-body); line-height:1.35; }
.contact-channel-grid small{ margin-top:7px; color:#687575; line-height:1.5; }
.contact-channel-action{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; color:var(--brand-dark); font-size:var(--t-small); font-weight:900; }
.contact-channel-action b{ font-size:var(--t-body); transition:transform .2s ease; }
.contact-channel-grid>a:hover,.contact-channel-grid>button:hover{ transform:translateY(-3px); border-color:rgba(21,111,96,.36); box-shadow:0 17px 34px rgba(24,39,40,.1); }
.contact-channel-grid>a:hover .contact-channel-action b,.contact-channel-grid>button:hover .contact-channel-action b{ transform:translateX(3px); }
.contact-request-section{ padding:66px 0; background:#f7f4ef; }
.contact-request-panel{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr); gap:56px; align-items:center; padding:46px; border-radius:8px; background:linear-gradient(135deg,#0f5b4f,#173c37); color:#fff; }
.contact-request-copy>span{ color:#a9ded2; }
.contact-request-copy h2{ max-width:470px; font-size:var(--t-display); line-height:1.08; }
.contact-request-copy>p{ max-width:500px; margin:16px 0 0; color:rgba(255,255,255,.78); line-height:1.65; }
.contact-request-copy ul{ list-style:none; display:grid; gap:11px; margin:24px 0 0; padding:0; }
.contact-request-copy li{ position:relative; padding-left:25px; color:rgba(255,255,255,.9); line-height:1.5; }
.contact-request-copy li::before{ content:""; position:absolute; left:0; top:.48em; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.contact-request-copy .contact-safety-note{ margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.17); color:rgba(255,255,255,.66); font-size:var(--t-micro); }
.contact-form{ box-shadow:none; }
.contact-form .btn-accent{ width:100%; }
.contact-guidance{ padding:64px 0 70px; background:#edf3ef; border-block:1px solid var(--line); }
.contact-guidance-panel{ padding:34px; border:1px solid rgba(24,39,40,.1); border-radius:8px; background:#fff; box-shadow:0 16px 36px rgba(24,39,40,.06); }
.contact-guidance-head{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(340px,.8fr); gap:8px 48px; align-items:end; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.contact-guidance-head>span{ grid-column:1/-1; color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.contact-guidance-head h2{ max-width:620px; font-size:var(--t-display); line-height:1.12; }
.contact-guidance-head p{ margin:0; color:#5c6a69; line-height:1.65; }
.contact-guidance-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-guidance-grid article{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:17px; min-height:205px; padding:26px; border:1px solid var(--line); border-radius:8px; background:#f8faf8; }
.contact-guidance-grid article>span{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--brand); color:#fff; font-size:var(--t-micro); font-weight:900; }
.contact-guidance-grid h3{ margin:4px 0 12px; font-size:var(--t-lead); line-height:1.35; }
.contact-guidance-grid p{ margin:0; color:#526160; line-height:1.72; }
.contact-useful-links{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin-top:16px; padding-top:18px; border-top:1px solid var(--line); }
.contact-useful-links strong{ margin-right:auto; }
.contact-useful-links a{ padding:9px 13px; border:1px solid var(--line); border-radius:8px; color:var(--brand-dark); font-size:var(--t-small); font-weight:800; }
.contact-useful-links a:hover{ border-color:rgba(21,111,96,.38); background:var(--brand-soft); }
.utility-story{ padding:64px 0; background:#f7f4ef; }
.utility-story.is-soft{ background:#edf3ef; border-block:1px solid var(--line); }
.utility-story-grid{ display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:70px; align-items:start; }
.utility-story header{ position:sticky; top:142px; }
.utility-story header>span{ display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border-radius:50%; background:#176f61; color:#fff; font-size:var(--t-micro); font-weight:900; }
.utility-story h2{ max-width:390px; font-size:var(--t-display); line-height:1.15; letter-spacing:0; }
.utility-story-body,.utility-prose{ color:#415050; line-height:1.75; }
.utility-story-body>p:first-child{ margin-top:0; color:#263938; font-size:var(--t-body); }
.utility-story-body h3{ margin:26px 0 10px; color:var(--ink); font-size:var(--t-lead); }
.utility-story-body ul,.utility-story-body ol,.utility-prose ul{ padding-left:20px; }
.utility-story-body li,.utility-prose li{ margin:8px 0; }
.utility-story-body a,.utility-prose a{ color:var(--brand-dark); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.utility-prose{ max-width:none; }
.utility-faq{ padding:66px 0 72px; background:#edf3ef; border-block:1px solid var(--line); }
.utility-faq-grid{ display:grid; grid-template-columns:minmax(260px,.6fr) minmax(0,1.4fr); gap:70px; align-items:start; }
.utility-faq header>span{ color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.utility-faq h2{ margin-top:8px; font-size:var(--t-display); line-height:1.1; }
.utility-faq header p{ color:#5e6c6c; line-height:1.65; }
.utility-faq .faq details{ border-radius:8px; box-shadow:none; }
.utility-final{ padding:54px 0; background:#f7f4ef; }
.utility-final-inner{ display:flex; align-items:center; justify-content:space-between; gap:42px; padding:34px 38px; border-radius:8px; background:#154f47; color:#fff; }
.utility-final-inner>div:first-child{ max-width:700px; }
.utility-final-inner>div>span{ color:#a9ded2; font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.utility-final h2{ margin-top:7px; font-size:var(--t-display); }
.utility-final p{ margin:9px 0 0; color:rgba(255,255,255,.76); line-height:1.6; }
.utility-final .utility-actions{ flex:0 0 auto; margin:0; }
.utility-final .utility-actions>a{ color:#fff; }
/* ===== Service in a city ===== */
.service-place-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); }
.service-place-catalog{ padding:66px 0; }
.service-place-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.service-place-cards>a{ min-height:230px; padding:28px; border:1px solid var(--line); border-top:3px solid var(--brand); border-radius:8px; background:#fff; }
.service-place-cards span{ color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.service-place-cards h2{ margin:15px 0 10px; font-size:var(--t-h3); }
.service-place-cards p{ margin:0 0 18px; color:#617070; line-height:1.65; }
.service-place-cards b{ color:var(--brand-dark); font-size:var(--t-small); }
.service-place-process{ background:#edf3ef; }
.service-place-detail-main{ padding:68px 0; background:#fff; }
.service-place-detail-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:70px; align-items:start; }
.service-place-detail-copy>span{ color:var(--brand-dark); font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.service-place-detail-copy h2{ max-width:650px; margin:9px 0 20px; font-size:var(--t-display); line-height:1.12; }
.service-place-detail-grid aside{ padding:26px; border-radius:8px; background:#edf3ef; border:1px solid var(--line); }
.service-place-detail-grid aside h3{ font-size:var(--t-lead); }
.service-place-detail-grid aside ul{ margin:17px 0 22px; padding-left:20px; color:#506060; line-height:1.65; }
/* ===== Blog taxonomies ===== */
.taxonomy-hero{ padding:52px 0 34px; }
.taxonomy-hero h1{ font-size:var(--t-display); }
.taxonomy-hero p{ color:#5d6b6b; }
.taxonomy-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-bottom:60px; }
.taxonomy-list article{ padding:26px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.taxonomy-list article>span{ color:var(--brand-dark); font-size:var(--t-micro); font-weight:800; }
.taxonomy-list h2{ margin:9px 0; font-size:var(--t-lead); }
.taxonomy-list p{ color:#617070; line-height:1.6; }
.taxonomy-list article>a:last-child{ color:var(--brand-dark); font-weight:800; }
.taxonomy-terms{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-bottom:60px; }
.taxonomy-terms a{ display:flex; align-items:center; justify-content:space-between; padding:20px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.taxonomy-terms span{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand-dark); font-weight:900; }
@media (max-width:1024px){
.utility-hero-grid,.service-place-hero-grid{ grid-template-columns:1fr 1fr; gap:32px; }
.utility-factor-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.utility-factor-grid article:nth-child(2){ border-right:0; }
.utility-factor-grid article:nth-child(-n+2){ border-bottom:1px solid var(--line); }
.utility-factor-grid-three article:nth-child(2){ border-right:1px solid var(--line); }
.utility-factor-grid-three article:nth-child(3){ border-right:0; }
.utility-story-grid,.utility-faq-grid,.service-place-detail-grid{ gap:38px; }
.contact-request-panel{ grid-template-columns:1fr; gap:34px; padding:38px; }
.contact-request-copy{ max-width:680px; }
}
/* ===== Service detail v2: structured care pages ===== */
/* Home helper service: a dedicated editorial flow for the approved template. */
@media (max-width:760px){
.utility-hero,.service-place-hero{ padding:30px 0 38px; }
.utility-hero-grid,.service-place-hero-grid{ grid-template-columns:1fr; gap:26px; }
.utility-hero-copy h1,.service-place-hero h1{ font-size:var(--t-display); }
.utility-lead,.service-place-hero p{ font-size:var(--t-small); line-height:1.62; }
.utility-hero-visual,.service-place-hero-image{ min-height:270px; }
.utility-actions{ display:grid; grid-template-columns:1fr; }
.utility-actions>*{ width:100%; justify-content:center; text-align:center; }
.utility-highlight,.utility-story,.service-place-process,.service-place-catalog,.service-place-detail-main,.utility-faq{ padding:44px 0; }
.utility-section-head{ grid-template-columns:1fr; gap:10px; }
.utility-section-head h2{ font-size:var(--t-h2); }
.utility-factor-grid,.utility-factor-grid-three,.service-place-cards,.taxonomy-list,.taxonomy-terms{ grid-template-columns:1fr; }
.utility-factor-grid article,.utility-factor-grid-three article{ min-height:0; padding:20px; border-right:0; border-bottom:1px solid var(--line); }
.utility-factor-grid article:last-child{ border-bottom:0; }
.utility-factor-grid b{ margin-bottom:16px; }
.utility-story-grid,.utility-faq-grid,.service-place-detail-grid{ grid-template-columns:1fr; gap:24px; }
.utility-story header{ position:static; }
.utility-story h2{ font-size:var(--t-h2); }
.utility-story-body{ font-size:var(--t-small); }
.contact-channels,.contact-request-section,.contact-guidance{ padding:42px 0; }
.contact-section-head{ grid-template-columns:1fr; gap:12px; margin-bottom:22px; }
.contact-section-head h2{ font-size:var(--t-h2); }
.contact-channel-grid{ grid-template-columns:1fr; }
.contact-channel-grid{ gap:10px; }
.contact-channel-grid>a,.contact-channel-grid>button{ min-height:0; padding:20px; }
.contact-channel-top{ margin-bottom:14px; }
.contact-request-panel{ gap:26px; padding:24px 18px; }
.contact-request-copy h2{ font-size:var(--t-h2); }
.contact-request-copy>p{ font-size:var(--t-small); }
.contact-request-copy ul{ margin-top:18px; font-size:var(--t-small); }
.contact-guidance-panel{ padding:22px 16px; }
.contact-guidance-head{ grid-template-columns:1fr; gap:9px; margin-bottom:18px; padding-bottom:18px; }
.contact-guidance-head h2{ font-size:var(--t-h2); }
.contact-guidance-head p{ font-size:var(--t-small); }
.contact-guidance-grid{ grid-template-columns:1fr; gap:10px; }
.contact-guidance-grid article{ min-height:0; padding:20px 16px; }
.contact-guidance-grid h3{ font-size:var(--t-lead); }
.contact-guidance-grid p{ font-size:var(--t-small); }
.contact-useful-links{ align-items:flex-start; }
.contact-useful-links strong{ flex:0 0 100%; margin:0 0 4px; }
.utility-final{ padding:34px 0; }
.utility-final-inner{ display:grid; gap:24px; padding:25px 20px; }
.utility-final .utility-actions{ width:100%; }
.service-place-cards>a{ min-height:0; padding:22px; }
.taxonomy-hero{ padding:38px 0 24px; }
}
/* ===== Legal pages ===== */
.legal-page{ background:#f7f5f0; padding-bottom:44px; }
.legal-hero{ padding:46px 0 38px; background:linear-gradient(180deg,#f3f8f5 0%,#f7f5f0 100%); border-bottom:1px solid var(--line); }
.legal-hero-inner{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:46px; align-items:end; }
.legal-label{ display:inline-block; margin:2px 0 12px; color:var(--brand-dark); font-size:var(--t-micro); font-weight:800; text-transform:uppercase; }
.legal-hero h1{ max-width:760px; font-size:var(--t-display); line-height:1.08; }
.legal-hero .lead{ max-width:760px; margin-bottom:0; }
.legal-meta{ display:grid; gap:5px; padding:18px 20px; border-left:3px solid var(--brand); background:#fff; }
.legal-meta span{ color:var(--muted); font-size:var(--t-micro); }
.legal-meta strong{ font-size:var(--t-body); }
.legal-meta a{ color:var(--brand-dark); font-size:var(--t-small); font-weight:700; overflow-wrap:anywhere; }
.legal-layout{ display:grid; grid-template-columns:250px minmax(0,760px); justify-content:center; gap:54px; align-items:start; padding-top:44px; }
.legal-toc{ position:sticky; top:132px; padding:20px 0; border-top:2px solid var(--brand); border-bottom:1px solid var(--line); }
.legal-toc h2{ margin-bottom:12px; font-size:var(--t-small); }
.legal-toc nav>ul{ margin:0; padding:0; list-style:none; display:grid; gap:3px; }
.legal-toc nav ul ul{ display:none; }
.legal-toc a{ display:block; padding:7px 0; color:var(--muted); font-size:var(--t-micro); line-height:1.35; }
.legal-toc a:hover{ color:var(--brand-dark); }
.legal-content.rte{ max-width:none; padding:30px 36px; background:#fff; border:1px solid var(--line); }
.legal-content.rte>p:first-child{ font-size:var(--t-body); color:#344543; }
.legal-content.rte h2{ margin:36px 0 12px; padding-top:4px; color:#153b35; font-size:var(--t-h3); line-height:1.3; }
.legal-content.rte h2:first-of-type{ margin-top:22px; }
.legal-content.rte a{ color:var(--brand-dark); text-decoration:underline; text-underline-offset:3px; }
.legal-content.rte blockquote{ margin:20px 0; padding:18px 20px; border-left:3px solid var(--accent); background:#fbf4ee; color:#344543; }
.legal-content.rte blockquote p{ margin:0; }
.legal-related{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding-top:28px; }
.legal-related a{ padding:9px 14px; border:1px solid var(--line); background:#fff; color:var(--brand-dark); font-size:var(--t-small); font-weight:700; }
.legal-related a:hover{ border-color:var(--brand); }
/* ===== Modal ===== */
.modal-backdrop{ position:fixed; inset:0; z-index:60; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; overscroll-behavior:contain; padding:18px; background:rgba(12,20,23,.55); }
.modal-backdrop.is-open{ display:flex; }
.lead-modal{ position:relative; width:min(520px,100%); margin:auto 0; background:#fff; border-radius:20px; padding:28px; box-shadow:0 30px 80px rgba(12,20,23,.4); }
.modal-close{ position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:var(--t-h2); cursor:pointer; color:var(--muted); }
.modal-lead{ margin:8px 0 0; color:var(--muted); line-height:1.55; }
.modal-form{ display:grid; gap:12px; margin-top:14px; }
.modal-form label{ display:grid; gap:6px; font-weight:700; font-size:var(--t-small); }
.modal-form input,.modal-form select,.modal-form textarea{ padding:11px 12px; border:1px solid var(--line); border-radius:12px; }
.modal-form textarea{ min-height:90px; resize:vertical; }
.modal-form .form-note{ margin:0; color:var(--muted); font-size:var(--t-micro); line-height:1.45; }
.form-honeypot{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }
.form-consent{ display:flex!important; align-items:flex-start; gap:9px!important; color:var(--muted); font-size:var(--t-micro)!important; font-weight:500!important; line-height:1.45; }
.form-consent input{ flex:0 0 auto; width:17px!important; height:17px!important; margin:1px 0 0; accent-color:var(--brand); }
.form-status{ min-height:1.4em; margin:0; font-size:var(--t-small); font-weight:700; line-height:1.4; }
.form-status:empty{ display:none; }
.form-status.is-loading{ color:var(--muted); }
.form-status.is-success{ color:#0b725f; }
.form-status.is-error{ color:#a33a2a; }
[data-lead-form] button[type="submit"]:disabled{ cursor:wait; opacity:.68; }
/* ===== Floating ===== */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:25; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--brand-dark); box-shadow:0 12px 28px rgba(20,36,42,.16); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s,transform .25s,visibility .25s; font-size:var(--t-lead); font-weight:800; }
.to-top.is-shown{ opacity:1; visibility:visible; transform:none; }
.mobile-cta{ position:fixed; left:12px; right:12px; bottom:12px; z-index:24; display:none; gap:10px; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 14px 34px rgba(20,36,42,.18); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px); transition:opacity .2s,visibility .2s,transform .2s; }
.mobile-cta.is-shown{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.mobile-cta button,.mobile-cta a{ flex:1; display:grid; place-items:center; border:0; cursor:pointer; min-height:48px; border-radius:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.mobile-cta .mobile-cta-call{ flex:0 0 auto; padding:0 14px; background:var(--accent-soft); color:var(--accent-dark); font-size:var(--t-small); white-space:nowrap; }
/* ===== Reveal ===== */
[data-anim="on"] .page>section{ opacity:0; transform:translateY(22px); }
[data-anim="on"] .page>section.is-visible{ opacity:1; transform:none; transition:opacity .6s,transform .6s; }
/* ===== Home: offer / vetting / steps ===== */
.step{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; }
.step-n{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; font-weight:800; font-size:var(--t-lead); display:grid; place-items:center; margin-bottom:14px; }
.step h3{ margin:0 0 6px; font-size:var(--t-body); }
.step p{ color:#4b555c; line-height:1.55; font-size:var(--t-small); margin:0; }
/* ===== Responsive ===== */
@media (max-width:1024px){
.about{ grid-template-columns:1fr; }
.hero-media{ min-height:280px; }
.svc-grid,.reasons,.blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.reviews,.footer-grid{ grid-template-columns:1fr 1fr; }
.site-header .header-row{ position:relative; }
.nav{ display:none; position:absolute; left:0; right:0; top:100%; background:linear-gradient(135deg,#0f5b4f,#0d1f1c); flex-direction:column; padding:6px 16px 18px; gap:0; box-shadow:0 18px 40px rgba(12,20,23,.32); max-height:calc(100vh - 96px); overflow-y:auto; }
.nav.is-open{ display:flex; }
.nav a{ width:100%; padding:14px 6px; font-size:var(--t-small); border-bottom:1px solid rgba(255,255,255,.10); }
.nav-extra{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; padding:18px 2px 2px; }
.nav-cta{ width:100%; border:0; cursor:pointer; padding:14px; border-radius:12px; color:#fff; font-weight:800; font-size:var(--t-small); background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.nav-socials{ display:flex; gap:12px; }
.nav-socials .s{ width:42px; height:42px; }
.nav-socials .s img{ width:18px; height:18px; }
.menu-toggle{ display:block; }
.legal-layout{ grid-template-columns:1fr; gap:22px; }
.legal-toc{ position:static; padding:16px 20px; background:#fff; }
.legal-toc nav>ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
}
@media (max-width:760px){
section{ padding:28px 0; }
.wrap{ width:calc(100% - 24px); }
.topbar{ display:none; }
.header-phone{ display:inline-flex; align-items:center; font-size:var(--t-micro); }
.header-row{ gap:6px; padding:4px 0; }
.logo{ margin-left:0; }
.logo .logo-full{ display:none; }
.logo .logo-m{ display:block; height:56px; width:auto; transform:none; }
.footer-grid{ grid-template-columns:1fr; gap:22px; }
.footer-legal{ flex-direction:column; gap:14px; }
.footer-legal nav{ justify-content:flex-start; }
.lead{ font-size:var(--t-body); }
.legal-hero{ padding:28px 0 24px; }
.legal-hero-inner{ grid-template-columns:1fr; gap:20px; }
.legal-meta{ padding:14px 16px; }
.legal-layout{ padding-top:24px; }
.legal-content.rte{ padding:22px 18px; }
.legal-content.rte h2{ font-size:var(--t-lead); }
}
@media (max-width:760px){
.svc-grid,.reasons,.blog-grid,.reviews{ grid-template-columns:1fr; }
.header-actions .cta{ display:none; }
.mobile-cta{ display:flex; } .to-top{ display:none; }
.sec-head h2{ font-size:var(--t-h2); }
.cta-band{ padding:24px 18px; }
.lang-switch{ justify-content:center; }
.legal-toc nav>ul{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
[data-anim="on"] .page>section{ opacity:1; transform:none; }
html{ scroll-behavior:auto; }
}
/* ===== Service detail pages ===== */
.city-detail-page .service-detail-hero{
background:#f7f5f0;
}
.city-detail-page .service-detail-hero-grid{
align-items:center;
}
.city-detail-page .service-detail-visual img{
object-position:center;
}
.city-detail-page.is-home-help .service-detail-visual img{
object-position:54% center;
}
.city-detail-visual-note strong{
display:block;
margin:3px 0 5px;
color:#172929;
font-size:var(--t-lead);
line-height:1.2;
}
.city-detail-visual-note>span{
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
}
.service-detail-page{
background:#f8f5ef;
overflow-x:clip;
}
.service-detail-hero{
padding:52px 0 58px;
background:#fbf9f5;
border-bottom:1px solid rgba(24,39,40,.08);
}
.service-detail-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(390px,.78fr);
gap:64px;
align-items:center;
}
.service-detail-hero-copy{
min-width:0;
}
.service-detail-hero .breadcrumbs{
margin-bottom:22px;
}
.service-detail-kicker{
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:14px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.service-detail-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 5px rgba(25,133,111,.10);
}
.service-detail-hero h1{
max-width:760px;
font-size:var(--t-display);
line-height:1.02;
letter-spacing:0;
}
.service-detail-lead{
max-width:720px;
margin:20px 0 24px;
color:#526161;
font-size:var(--t-body);
line-height:1.72;
}
.service-detail-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}
.service-detail-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
margin:0;
padding:0;
list-style:none;
}
.service-detail-trust li{
position:relative;
min-height:66px;
display:flex;
align-items:center;
padding:12px 12px 12px 34px;
border:1px solid rgba(24,39,40,.10);
border-radius:8px;
background:#fff;
color:#233535;
font-size:var(--t-micro);
font-weight:800;
line-height:1.42;
}
.service-detail-trust li::before{
content:"";
position:absolute;
left:14px;
width:8px;
height:8px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 4px rgba(25,133,111,.11);
}
.service-detail-visual{
position:relative;
min-height:570px;
overflow:hidden;
border-radius:8px;
background:#dce9e3;
box-shadow:0 24px 52px rgba(24,39,40,.13);
}
.service-detail-visual>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.service-detail-visual::after{
content:"";
position:absolute;
inset:auto 0 0;
height:42%;
background:linear-gradient(180deg,rgba(11,45,39,0),rgba(11,45,39,.34));
}
.service-detail-visual-note{
position:absolute;
z-index:1;
left:18px;
right:18px;
bottom:18px;
padding:17px 18px;
border-radius:8px;
background:rgba(255,255,255,.96);
box-shadow:0 12px 28px rgba(24,39,40,.14);
}
.service-detail-visual-note span{
display:block;
margin-bottom:5px;
font-weight:900;
}
.service-detail-visual-note p{
margin:0;
color:#5a6868;
font-size:var(--t-small);
line-height:1.5;
}
.service-detail-final-inner>div>span{
display:block;
margin-bottom:9px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.service-detail-final{
padding:64px 0;
background:#edf2ee;
}
.service-detail-final-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:44px;
padding:38px 42px;
border-radius:8px;
background:linear-gradient(125deg,#0f5b4f,#183735);
color:#fff;
box-shadow:0 22px 48px rgba(24,39,40,.14);
}
.service-detail-final-inner>div:first-child{
max-width:760px;
}
.service-detail-final-inner>div>span{
color:#a8ded2;
}
.service-detail-final h2{
font-size:var(--t-display);
line-height:1.12;
}
.service-detail-final p{
margin:12px 0 0;
color:rgba(255,255,255,.76);
line-height:1.65;
}
.service-detail-final-actions{
flex:0 0 auto;
display:grid;
gap:10px;
min-width:220px;
}
.service-detail-final-actions>*{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}
.service-detail-final-actions>a{
border:1px solid rgba(255,255,255,.28);
border-radius:8px;
color:#fff;
font-weight:900;
}
@media (max-width:1024px){
.service-detail-hero-grid{
grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);
gap:34px;
}
.service-detail-trust{
grid-template-columns:1fr;
}
.service-detail-trust li{
min-height:48px;
}
.service-detail-visual{
min-height:500px;
}
}
@media (max-width:760px){
.service-detail-hero{
padding:30px 0 38px;
}
.city-detail-page .service-detail-hero{
padding:24px 0 30px;
}
.service-detail-hero-grid{
grid-template-columns:1fr;
}
.service-detail-hero-grid{
gap:28px;
}
.city-detail-page .service-detail-hero-grid{
gap:20px;
}
.service-detail-hero .breadcrumbs{
margin-bottom:18px;
}
.service-detail-hero h1{
font-size:var(--t-display);
}
.service-detail-lead{
margin:16px 0 20px;
font-size:var(--t-small);
line-height:1.62;
}
.service-detail-actions{
display:grid;
grid-template-columns:1fr;
margin-bottom:20px;
}
.service-detail-actions>*{
width:100%;
justify-content:center;
text-align:center;
}
.service-detail-trust{
grid-template-columns:1fr 1fr;
}
.service-detail-trust li{
min-height:58px;
font-size:var(--t-micro);
}
.service-detail-trust li:last-child{
grid-column:1 / -1;
}
.service-detail-visual{
min-height:270px;
}
.city-detail-page .service-detail-visual{
min-height:235px;
}
.service-detail-final{
padding:42px 0;
}
.service-detail-final-inner{
display:grid;
gap:26px;
padding:28px 22px;
}
.service-detail-final-actions{
min-width:0;
}
}
@media (max-width:480px){
.service-detail-visual{
min-height:250px;
}
.city-detail-page .service-detail-visual{
min-height:225px;
}
.service-detail-visual-note{
left:12px;
right:12px;
bottom:12px;
padding:14px;
}
}
/* ===== About DobroYou ===== */
.about-page{
overflow-x:clip;
background:#f8f5ef;
}
.about-hero{
padding:50px 0 58px;
background:#fbf9f5;
border-bottom:1px solid rgba(24,39,40,.08);
}
.about-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.06fr) minmax(390px,.78fr);
gap:64px;
align-items:center;
}
.about-hero-copy{ min-width:0; }
.about-hero .breadcrumbs{ margin-bottom:22px; }
.about-kicker,
.about-section-kicker,
.about-section-head p,
.about-process header>p,
.about-difference header>p{
margin:0 0 10px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.about-kicker{
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:14px;
}
.about-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 5px rgba(25,133,111,.10);
}
.about-hero h1{
max-width:720px;
font-size:var(--t-display);
line-height:1;
letter-spacing:0;
}
.about-lead{
max-width:740px;
margin:20px 0 24px;
color:#526161;
font-size:var(--t-body);
line-height:1.72;
}
.about-hero-points{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
margin:0;
padding:0;
list-style:none;
}
.about-hero-points li{
min-height:98px;
padding:15px;
border-top:3px solid var(--brand);
background:#fff;
}
.about-hero-points strong,
.about-hero-points span{ display:block; }
.about-hero-points strong{
margin-bottom:6px;
color:#172929;
font-size:var(--t-small);
}
.about-hero-points span{
color:#627070;
font-size:var(--t-micro);
line-height:1.45;
}
.about-hero-visual{
position:relative;
min-height:570px;
overflow:hidden;
border-radius:8px;
background:#dce9e3;
box-shadow:0 24px 52px rgba(24,39,40,.13);
}
.about-hero-visual>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.about-hero-visual::after{
content:"";
position:absolute;
inset:auto 0 0;
height:38%;
background:linear-gradient(180deg,rgba(11,45,39,0),rgba(11,45,39,.38));
}
.about-hero-note{
position:absolute;
z-index:1;
left:18px;
right:18px;
bottom:18px;
padding:17px 18px;
border-radius:8px;
background:rgba(255,255,255,.96);
box-shadow:0 12px 28px rgba(24,39,40,.14);
}
.about-hero-note span{
display:block;
margin-bottom:5px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.about-hero-note strong{
color:#172929;
font-size:var(--t-body);
line-height:1.4;
}
.about-intro{
padding:42px 0;
background:#fff;
border-bottom:1px solid rgba(24,39,40,.08);
}
.about-intro-grid{
display:grid;
grid-template-columns:minmax(190px,.48fr) minmax(0,1.52fr);
gap:64px;
align-items:start;
}
.about-intro-label{
margin:4px 0 0;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.about-intro-copy p{
max-width:900px;
margin:0;
color:#263838;
font-size:var(--t-h2);
line-height:1.5;
}
.about-origin,
.about-approach,
.about-team{
padding:76px 0;
background:#fbf9f5;
border-bottom:1px solid rgba(24,39,40,.07);
}
.about-origin-grid,
.about-approach-grid,
.about-team-grid{
display:grid;
grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
gap:68px;
align-items:center;
}
.about-origin-image,
.about-approach-image{
position:relative;
min-height:520px;
overflow:hidden;
border-radius:8px;
background:#dce9e3;
}
.about-origin-image img,
.about-approach-image img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.about-section-number{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:16px;
border-radius:50%;
background:#145f53;
color:#fff;
font-size:var(--t-micro);
font-weight:900;
}
.about-origin-copy h2,
.about-approach-copy h2,
.about-team-copy h2,
.about-reasons h2,
.about-difference h2,
.about-process h2,
.about-section-head h2{
font-size:var(--t-display);
line-height:1.08;
letter-spacing:0;
}
.about-origin-copy>div,
.about-approach-copy>div,
.about-team-copy>div,
.about-difference-grid>div,
.about-process-intro{
margin-top:20px;
color:#425252;
line-height:1.75;
}
.about-mission{
margin-top:28px;
padding:22px 24px;
border-left:4px solid var(--accent);
background:#fff;
}
.about-mission>p{
margin:0 0 6px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.about-mission h3{
margin:0 0 10px;
color:#172929;
font-size:var(--t-lead);
}
.about-mission div p{ margin:0; }
.about-values{
padding:72px 0 76px;
background:#edf2ee;
border-bottom:1px solid rgba(24,39,40,.07);
}
.about-section-head{
display:grid;
grid-template-columns:minmax(190px,.46fr) minmax(0,1.54fr);
gap:64px;
align-items:end;
margin-bottom:34px;
}
.about-section-head .about-section-number{ margin-bottom:12px; }
.about-values-body ul,
.about-difference-grid>div ul,
.about-reasons ul{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:0;
padding:0;
list-style:none;
}
.about-values-body li,
.about-difference-grid>div li,
.about-reasons li{
position:relative;
min-height:120px;
padding:22px 20px 20px 48px;
border-top:2px solid rgba(25,133,111,.54);
background:#fff;
color:#425252;
line-height:1.6;
}
.about-values-body li::before,
.about-difference-grid>div li::before,
.about-reasons li::before{
content:"";
position:absolute;
top:27px;
left:21px;
width:9px;
height:9px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 5px rgba(25,133,111,.11);
}
.about-values-body strong,
.about-difference-grid>div strong,
.about-reasons strong{ color:#172929; }
.about-process{
padding:76px 0 80px;
background:#fbf9f5;
border-bottom:1px solid rgba(24,39,40,.07);
}
.about-process-grid,
.about-difference-grid{
display:grid;
grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr);
gap:68px;
align-items:start;
}
.about-process-body ol{
counter-reset:about-step;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:0;
padding:0;
list-style:none;
}
.about-process-body li{
counter-increment:about-step;
position:relative;
min-height:150px;
padding:22px 20px 20px 72px;
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
color:#425252;
line-height:1.58;
}
.about-process-body li::before{
content:counter(about-step,decimal-leading-zero);
position:absolute;
top:20px;
left:18px;
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:50%;
background:#145f53;
color:#fff;
font-size:var(--t-micro);
font-weight:900;
}
.about-process-body strong{ color:#172929; }
.about-approach-image::after{
content:"";
position:absolute;
inset:auto 0 0;
height:42%;
background:linear-gradient(180deg,transparent,rgba(11,45,39,.58));
}
.about-approach-image>p{
position:absolute;
z-index:1;
left:24px;
right:24px;
bottom:22px;
margin:0;
color:#fff;
font-size:var(--t-body);
font-weight:800;
line-height:1.52;
}
.about-approach-copy ul{
display:grid;
gap:11px;
margin:24px 0 0;
padding:0;
list-style:none;
}
.about-approach-copy li{
padding:16px 18px;
border-left:3px solid var(--brand);
background:#fff;
color:#425252;
line-height:1.6;
}
.about-difference{
padding:72px 0 76px;
background:#edf2ee;
border-bottom:1px solid rgba(24,39,40,.07);
}
.about-team{ background:#fbf9f5; }
.about-team-grid{ align-items:start; }
.about-reasons{
padding:28px;
border-radius:8px;
background:#fff;
box-shadow:0 18px 42px rgba(24,39,40,.08);
}
.about-reasons ul{
grid-template-columns:1fr;
margin-top:24px;
}
.about-reasons li{ min-height:0; }
.about-responsibility{
padding:58px 0;
background:#fff;
}
.about-responsibility-inner{
display:grid;
grid-template-columns:minmax(190px,.45fr) minmax(260px,.65fr) minmax(0,.9fr);
gap:40px;
align-items:start;
padding:30px 34px;
border-top:3px solid var(--brand);
background:#f5f7f4;
}
.about-responsibility-inner>span{
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.about-responsibility h2{
font-size:var(--t-h2);
line-height:1.13;
}
.about-responsibility p{
margin:0;
color:#4d5d5d;
line-height:1.7;
}
.about-final{ padding-top:58px; }
@media (max-width:1024px){
.about-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(320px,.76fr); gap:36px; }
.about-hero-points{ grid-template-columns:1fr; }
.about-hero-points li{ min-height:0; }
.about-origin-grid,.about-approach-grid,.about-team-grid{ gap:38px; }
.about-process-grid,.about-difference-grid{ gap:38px; }
}
@media (max-width:760px){
.about-hero{ padding:28px 0 34px; }
.about-hero-grid,
.about-intro-grid,
.about-origin-grid,
.about-section-head,
.about-process-grid,
.about-approach-grid,
.about-difference-grid,
.about-team-grid,
.about-responsibility-inner{ grid-template-columns:1fr; }
.about-hero-grid{ gap:24px; }
.about-hero h1{ font-size:var(--t-display); }
.about-lead{ margin:16px 0 20px; font-size:var(--t-small); line-height:1.62; }
.about-hero-points{ grid-template-columns:1fr 1fr; }
.about-hero-points li{ min-height:82px; }
.about-hero-points li:last-child{ grid-column:1 / -1; }
.about-hero-visual{ min-height:270px; }
.about-intro{ padding:32px 0; }
.about-intro-grid{ gap:14px; }
.about-intro-copy p{ font-size:var(--t-lead); }
.about-origin,.about-approach,.about-team,.about-values,.about-process,.about-difference{ padding:48px 0 52px; }
.about-origin-grid,.about-approach-grid,.about-team-grid,.about-process-grid,.about-difference-grid{ gap:26px; }
.about-origin-image,.about-approach-image{ min-height:300px; }
.about-section-head{ gap:10px; margin-bottom:26px; }
.about-values-body ul,.about-difference-grid>div ul,.about-process-body ol{ grid-template-columns:1fr; }
.about-values-body li,.about-difference-grid>div li{ min-height:0; }
.about-process-body li{ min-height:0; }
.about-reasons{ padding:22px 18px; }
.about-responsibility{ padding:42px 0; }
.about-responsibility-inner{ gap:14px; padding:25px 22px; }
}
@media (max-width:480px){
.about-hero-points{ grid-template-columns:1fr; }
.about-hero-points li:last-child{ grid-column:auto; }
.about-hero-points li{
min-height:0;
padding:10px 12px 10px 34px;
border-top:0;
border-left:3px solid var(--brand);
}
.about-hero-points strong{ margin-bottom:2px; }
.about-hero-points span{ font-size:var(--t-micro); }
.about-hero-visual{ min-height:245px; }
.about-hero-note{ left:12px; right:12px; bottom:12px; padding:14px; }
}
/* ===== Blog ===== */
.blog-index-page,.blog-detail-page{ overflow-x:clip; background:#f8f5ef; }
.blog-index-hero,.blog-detail-hero{
padding:50px 0 58px;
background:#fbf9f5;
border-bottom:1px solid rgba(24,39,40,.08);
}
.blog-index-hero-grid,.blog-detail-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(390px,.8fr);
gap:64px;
align-items:center;
}
.blog-index-hero .breadcrumbs,.blog-detail-hero .breadcrumbs{ margin-bottom:22px; }
.blog-kicker{
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:14px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.blog-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 5px rgba(25,133,111,.1);
}
.blog-index-hero h1,.blog-detail-hero h1{
max-width:780px;
font-size:var(--t-display);
line-height:1.02;
letter-spacing:0;
}
.blog-index-hero-copy>p,.blog-detail-hero-copy>p{
max-width:720px;
margin:20px 0 25px;
color:#526161;
font-size:var(--t-body);
line-height:1.72;
}
.blog-index-hero-visual,.blog-detail-hero-image{
position:relative;
min-height:470px;
overflow:hidden;
border-radius:8px;
background:#dce9e3;
box-shadow:0 24px 52px rgba(24,39,40,.13);
}
.blog-index-hero-visual>img,.blog-detail-hero-image>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.blog-index-hero-visual::after{
content:"";
position:absolute;
inset:auto 0 0;
height:42%;
background:linear-gradient(180deg,transparent,rgba(11,45,39,.55));
}
.blog-index-hero-visual>div{
position:absolute;
z-index:1;
left:22px;
right:22px;
bottom:20px;
color:#fff;
}
.blog-index-hero-visual span{
display:block;
margin-bottom:6px;
color:#bfe7de;
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.blog-index-hero-visual strong{
display:block;
max-width:430px;
font-size:var(--t-lead);
line-height:1.4;
}
.blog-index-content{ padding:74px 0 80px; background:#edf2ee; }
.blog-index-head{
display:grid;
grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
gap:68px;
align-items:end;
margin-bottom:34px;
}
.blog-index-head span,.blog-index-final span,
.blog-detail-help>span,.blog-detail-aside>div>span{
display:block;
margin-bottom:9px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.blog-index-head h2{
max-width:670px;
font-size:var(--t-display);
line-height:1.08;
}
.blog-index-head>p{
max-width:620px;
margin:0;
color:#5a6868;
line-height:1.7;
}
.blog-index-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.blog-index-card{
display:grid;
grid-template-columns:minmax(220px,.84fr) minmax(0,1.16fr);
min-height:340px;
overflow:hidden;
border:1px solid rgba(24,39,40,.1);
border-radius:8px;
background:#fff;
box-shadow:0 16px 36px rgba(24,39,40,.07);
}
.blog-index-card-image{ position:relative; min-height:100%; overflow:hidden; }
.blog-index-card-image img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.blog-index-card:hover .blog-index-card-image img{ transform:scale(1.025); }
.blog-index-card-body{ display:flex; flex-direction:column; padding:25px 24px; }
.blog-index-card-meta,.blog-detail-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 16px;
margin-bottom:18px;
color:#758080;
font-size:var(--t-micro);
font-weight:800;
text-transform:uppercase;
}
.blog-index-card-meta span,.blog-detail-meta span{
padding:5px 9px;
border-radius:4px;
background:#e2f1ec;
color:var(--brand-dark);
}
.blog-index-card h2{ margin-bottom:12px; font-size:var(--t-h3); line-height:1.25; }
.blog-index-card h2 a{ color:#172929; }
.blog-index-card-body>p{
margin:0 0 22px;
color:#5b6969;
font-size:var(--t-small);
line-height:1.62;
}
.blog-index-card-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:auto;
padding-top:15px;
border-top:1px solid rgba(24,39,40,.1);
color:var(--brand-dark);
font-weight:900;
}
.blog-index-final{ padding-top:62px; }
.blog-detail-meta{ margin:0 0 16px; }
.blog-detail-body{ padding:72px 0 80px; background:#f8f5ef; }
.blog-detail-layout{
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
gap:58px;
align-items:start;
}
.blog-detail-article{
padding:38px 42px;
border:1px solid rgba(24,39,40,.1);
border-radius:8px;
background:#fff;
box-shadow:0 18px 42px rgba(24,39,40,.06);
}
.blog-detail-intro{
margin-bottom:34px;
padding-bottom:26px;
border-bottom:1px solid rgba(24,39,40,.12);
color:#263838;
font-size:var(--t-lead);
line-height:1.75;
}
.blog-detail-intro p{ margin:0; }
.blog-article-section{ margin-top:36px; scroll-margin-top:150px; }
.blog-article-section>span{
width:38px;
height:38px;
display:grid;
place-items:center;
margin-bottom:14px;
border-radius:50%;
background:#145f53;
color:#fff;
font-size:var(--t-micro);
font-weight:900;
}
.blog-article-section h2{
margin-bottom:18px;
color:#172929;
font-size:var(--t-display);
line-height:1.15;
}
.blog-article-section>div{ color:#405151; line-height:1.75; }
.blog-article-section ul{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:22px 0 0;
padding:0;
list-style:none;
}
.blog-article-section li{
position:relative;
min-height:72px;
padding:15px 15px 15px 42px;
border-top:2px solid rgba(25,133,111,.48);
background:#f5f7f4;
line-height:1.55;
}
.blog-article-section li::before{
content:"";
position:absolute;
top:21px;
left:17px;
width:9px;
height:9px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 5px rgba(25,133,111,.11);
}
.blog-detail-help{
margin-top:42px;
padding:28px;
border-radius:8px;
background:#edf2ee;
}
.blog-detail-help h2{ margin-bottom:10px; font-size:var(--t-h2); line-height:1.2; }
.blog-detail-help p{ margin:0 0 20px; color:#566565; line-height:1.65; }
.blog-detail-aside{ position:sticky; top:155px; }
.blog-detail-aside>div{
padding:25px;
border-top:3px solid var(--brand);
border-radius:0 0 8px 8px;
background:#fff;
box-shadow:0 14px 36px rgba(24,39,40,.07);
}
.blog-detail-aside h2{ margin-bottom:20px; font-size:var(--t-h3); }
.blog-related-link{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:13px;
align-items:center;
padding:14px 0;
border-top:1px solid rgba(24,39,40,.1);
color:#172929;
}
.blog-related-link img{
width:92px;
height:70px;
object-fit:cover;
border-radius:5px;
}
.blog-related-link h3{ font-size:var(--t-small); line-height:1.42; }
.blog-back-link{
display:flex;
justify-content:space-between;
margin-top:10px;
padding-top:17px;
border-top:1px solid rgba(24,39,40,.1);
color:var(--brand-dark);
font-weight:900;
}
@media (max-width:1024px){
.blog-index-card{ grid-template-columns:1fr; }
.blog-index-card-image{ min-height:220px; }
}
@media (max-width:1024px){
.blog-index-hero-grid,.blog-detail-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(320px,.78fr); gap:36px; }
.blog-detail-layout{ grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr); gap:32px; }
}
@media (max-width:760px){
.blog-index-hero,.blog-detail-hero{ padding:28px 0 34px; }
.blog-index-hero-grid,.blog-detail-hero-grid,.blog-index-head,.blog-detail-layout{ grid-template-columns:1fr; }
.blog-index-hero-grid,.blog-detail-hero-grid{ gap:24px; }
.blog-index-hero h1,.blog-detail-hero h1{ font-size:var(--t-display); }
.blog-index-hero-copy>p,.blog-detail-hero-copy>p{ margin:16px 0 20px; font-size:var(--t-small); line-height:1.62; }
.blog-index-hero-visual,.blog-detail-hero-image{ min-height:270px; }
.blog-index-content,.blog-detail-body{ padding:48px 0 54px; }
.blog-index-head{ gap:12px; margin-bottom:26px; }
.blog-index-grid{ grid-template-columns:1fr; }
.blog-index-card{ min-height:0; }
.blog-index-card-image{ min-height:220px; }
.blog-detail-article{ padding:27px 20px; }
.blog-detail-intro{ font-size:var(--t-body); }
.blog-article-section ul{ grid-template-columns:1fr; }
.blog-detail-aside{ position:static; }
}
@media (max-width:480px){
.blog-index-hero-visual,.blog-detail-hero-image{ min-height:235px; }
.blog-index-card-image{ min-height:200px; }
.blog-index-card-body{ padding:22px 18px; }
}
/* ===== Conversion home rebuild ===== */
.home-page{
background:#f7f3ed;
}
:where(.home-page) section{ padding:64px 0; }
.home-hero{
padding:44px 0 52px;
overflow:hidden;
background:#fbf8f3;
border-bottom:1px solid rgba(24,39,40,.07);
}
.hero-shell{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(400px,.82fr);
gap:52px;
align-items:center;
}
.hero-copy{ min-width:0; padding:18px 0; }
.hero-copy h1{
max-width:690px;
font-size:var(--t-display);
line-height:1.04;
letter-spacing:0;
}
.hero-lead{
max-width:650px;
margin:18px 0 22px;
color:#465657;
font-size:var(--t-body);
line-height:1.7;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px; }
.btn-accent,
.btn-line{
min-height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:10px;
padding:13px 22px;
font-weight:800;
cursor:pointer;
}
.btn-accent{
border:0;
color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
box-shadow:0 12px 28px rgba(200,108,69,.22);
}
.btn-line{
background:#fff;
border:1px solid rgba(24,39,40,.14);
color:#152626;
}
.btn-brand.full{ width:100%; }
.trust-strip{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
max-width:590px;
}
.trust-chip{
display:flex;
align-items:center;
gap:10px;
min-height:52px;
padding:12px 14px;
border:1px solid rgba(24,39,40,.10);
border-radius:12px;
background:rgba(255,255,255,.74);
color:#18302f;
font-weight:800;
line-height:1.25;
}
.trust-chip span{
width:10px;
height:10px;
flex:0 0 auto;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 6px rgba(25,133,111,.12);
}
.hero-aside{
position:relative;
display:grid;
align-content:start;
overflow:hidden;
border:1px solid rgba(24,39,40,.10);
border-radius:20px;
background:#fff;
box-shadow:0 24px 58px rgba(24,39,40,.13);
}
.hero-photo{
height:248px;
border-radius:0;
overflow:hidden;
background:#dfe8e3;
box-shadow:none;
}
.hero-photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.quick-form{
width:100%;
margin:0;
position:relative;
z-index:2;
padding:21px 24px 24px;
border-radius:0;
background:#fff;
border:0;
border-top:1px solid rgba(24,39,40,.08);
box-shadow:none;
}
.quick-form h2{ font-size:var(--t-body); margin-bottom:16px; }
.quick-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.quick-fields label,
.lead-form label{
display:grid;
gap:7px;
color:#314242;
font-size:var(--t-small);
font-weight:800;
}
.quick-fields label:first-child{ grid-column:1 / -1; }
.quick-fields input,
.quick-fields select,
.lead-form input,
.lead-form select,
.lead-form textarea{
width:100%;
min-height:46px;
border:1px solid rgba(24,39,40,.14);
border-radius:10px;
padding:10px 12px;
background:#fff;
color:#162526;
outline:none;
}
.quick-fields input:focus,
.quick-fields select:focus,
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
border-color:rgba(25,133,111,.62);
box-shadow:0 0 0 4px rgba(25,133,111,.12);
}
.section-intro{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(280px,.85fr);
gap:42px;
align-items:end;
margin-bottom:28px;
}
.section-intro.compact{ align-items:center; }
.eyebrow{
display:inline-flex;
margin-bottom:10px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.section-intro h2,
.story-copy h2,
.price-box h2,
.final-copy h2{
font-size:var(--t-display);
line-height:1.08;
letter-spacing:0;
}
.section-intro p,
.story-copy>p,
.price-box p,
.final-copy p{
margin:0;
color:#5a6768;
line-height:1.7;
}
.scenario-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
background:#eaf0ec;
border:1px solid rgba(24,39,40,.10);
border-radius:18px;
padding:16px;
box-shadow:0 16px 42px rgba(24,39,40,.06);
}
.scenario-card{
min-height:218px;
display:flex;
flex-direction:column;
padding:22px;
border-radius:12px;
background:#fff;
border:1px solid rgba(24,39,40,.08);
}
.scenario-card h3{ font-size:var(--t-body); line-height:1.28; margin-bottom:9px; }
.scenario-card p{ flex:1; margin:0; color:#566465; line-height:1.62; font-size:var(--t-small); }
.scenario-card a{
display:inline-flex;
margin-top:auto;
padding-top:14px;
color:var(--brand-dark);
font-weight:800;
font-size:var(--t-small);
}
.story-section{
background:#fff;
border-top:1px solid rgba(24,39,40,.07);
border-bottom:1px solid rgba(24,39,40,.07);
}
.story-grid{
display:grid;
grid-template-columns:minmax(340px,.88fr) minmax(0,1.12fr);
gap:48px;
align-items:stretch;
}
.story-media{
position:relative;
min-height:560px;
border-radius:18px;
overflow:hidden;
background:#dfe7e2;
box-shadow:0 20px 48px rgba(24,39,40,.10);
}
.story-media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:72% center;
}
.story-copy{ align-self:center; min-width:0; padding:8px 0; }
.process-list{ display:grid; gap:10px; margin-top:22px; }
.process-list article{
display:grid;
grid-template-columns:52px minmax(0,1fr);
gap:14px;
align-items:center;
padding:16px 18px;
border:1px solid rgba(24,39,40,.10);
border-left:3px solid var(--brand);
border-radius:12px;
background:#fff;
}
.process-list span{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--deep);
color:#fff;
font-weight:900;
}
.process-list h3{ font-size:var(--t-body); margin-bottom:5px; }
.process-list p{ margin:0; color:#5b6869; line-height:1.58; }
.trust-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.trust-grid article{
padding:22px;
border-radius:16px;
background:#fff;
border:1px solid rgba(24,39,40,.10);
border-top:4px solid var(--brand);
box-shadow:0 14px 34px rgba(24,39,40,.06);
}
.trust-grid strong{
display:block;
margin-bottom:9px;
color:#172828;
font-size:var(--t-body);
}
.trust-grid p{ margin:0; color:#5b6869; line-height:1.62; }
.home-editorial{
background:#f2f6f3;
border-top:1px solid rgba(24,39,40,.07);
border-bottom:1px solid rgba(24,39,40,.07);
}
.home-editorial-layout{
display:grid;
grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);
gap:clamp(44px,7vw,96px);
align-items:start;
}
.home-editorial-intro{
max-width:420px;
}
.home-editorial-intro h2{
margin:10px 0 16px;
color:#172828;
font-size:var(--t-display);
line-height:1.08;
}
.home-editorial-intro p{
margin:0 0 24px;
color:#536263;
line-height:1.7;
}
.home-editorial-list{
min-width:0;
border-top:1px solid rgba(24,39,40,.18);
}
.home-editorial-item{
border-bottom:1px solid rgba(24,39,40,.18);
}
.home-editorial-item summary{
display:grid;
grid-template-columns:44px minmax(0,1fr) 36px;
gap:18px;
align-items:center;
padding:22px 0;
cursor:pointer;
list-style:none;
}
.home-editorial-item summary::-webkit-details-marker{ display:none; }
.home-editorial-item summary:focus-visible{
outline:3px solid rgba(28,143,122,.28);
outline-offset:5px;
}
.home-editorial-item h3{
margin:0;
color:#172828;
font-size:var(--t-h3);
line-height:1.24;
}
.home-editorial-summary-copy{
display:block;
min-width:0;
}
.home-editorial-summary-copy>span{
display:block;
margin-top:7px;
color:#617071;
font-size:var(--t-small);
line-height:1.55;
}
.home-editorial-number{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:50%;
color:var(--brand-dark);
background:#dff2ec;
font-size:var(--t-small);
font-weight:900;
}
.home-editorial-toggle{
position:relative;
width:34px;
height:34px;
border:1px solid rgba(24,39,40,.14);
border-radius:50%;
background:#fff;
}
.home-editorial-toggle::before,
.home-editorial-toggle::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:12px;
height:2px;
background:var(--brand-dark);
transform:translate(-50%,-50%);
transition:transform .2s ease;
}
.home-editorial-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.home-editorial-item[open] .home-editorial-toggle::after{ transform:translate(-50%,-50%) rotate(0); }
.home-editorial-item[open] .home-editorial-number{
color:#fff;
background:var(--brand);
}
.home-editorial-body{
max-width:740px;
min-width:0;
padding:0 50px 26px 62px;
}
.home-editorial-body p{
margin:0 0 14px;
color:#536263;
line-height:1.68;
}
.home-editorial-body p:last-child{ margin-bottom:0; }
.home-editorial-body ul{
margin:18px 0 20px;
padding:0;
list-style:none;
}
.home-editorial-body li{
position:relative;
margin:0 0 12px;
padding:0 0 0 28px;
color:#435253;
line-height:1.55;
}
.home-editorial-body li::before{
content:"";
position:absolute;
top:.55em;
left:3px;
width:9px;
height:9px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 4px rgba(28,143,122,.11);
}
.home-editorial-body strong{ color:#172828; }
.cities-panel{
display:grid;
grid-template-columns:minmax(250px,.66fr) minmax(0,1.34fr);
gap:38px;
align-items:start;
padding:38px;
overflow:hidden;
border-radius:24px;
color:#fff;
background:linear-gradient(135deg,#0d6556 0%,#153f3a 58%,#192f2e 100%);
box-shadow:0 22px 56px rgba(24,39,40,.15);
}
.cities-panel .eyebrow{ color:#9fe3d4; }
.cities-panel h2{ font-size:var(--t-display); line-height:1.1; }
.cities-panel p{ color:rgba(255,255,255,.78); line-height:1.72; }
.cities-copy{
position:relative;
z-index:1;
}
.cities-copy p{ margin-bottom:0; }
.cities-stats{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}
.cities-stats span{
display:grid;
gap:1px;
min-width:116px;
padding:12px 14px;
border:1px solid rgba(255,255,255,.15);
border-radius:14px;
background:rgba(255,255,255,.08);
color:rgba(255,255,255,.76);
font-size:var(--t-micro);
line-height:1.25;
}
.cities-stats strong{
color:#fff;
font-size:var(--t-lead);
line-height:1;
}
.home-city-finder{
position:relative;
z-index:1;
min-width:0;
padding:22px;
border:1px solid rgba(255,255,255,.54);
border-radius:20px;
background:rgba(255,255,255,.97);
color:#182a29;
box-shadow:0 20px 48px rgba(7,32,29,.22);
}
.home-city-finder-top,
.home-city-finder-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.home-city-finder-top > div{
display:grid;
gap:2px;
}
.home-city-finder-top > div > span,
.home-city-finder-footer > span{
color:#73807f;
font-size:var(--t-micro);
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.home-city-finder-top strong{
color:#173331;
font-size:var(--t-lead);
}
.home-city-count{
flex:0 0 auto;
padding:7px 10px;
border-radius:999px;
background:#e8f5f0;
color:#176754;
font-size:var(--t-micro);
font-weight:900;
}
.home-city-service-switch{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
margin-top:18px;
padding:5px;
border:1px solid rgba(24,39,40,.10);
border-radius:14px;
background:#f2f5f3;
}
.home-city-service-switch button{
min-height:46px;
padding:9px 10px;
border:0;
border-radius:10px;
background:transparent;
color:#53615f;
cursor:pointer;
font:inherit;
font-size:var(--t-small);
font-weight:900;
line-height:1.2;
}
.home-city-service-switch button[aria-pressed="true"]{
background:#176754;
color:#fff;
box-shadow:0 8px 18px rgba(23,103,84,.20);
}
.home-city-service-switch button:focus-visible,
.home-city-search input:focus-visible,
.home-city-results a:focus-visible,
.home-city-finder-footer a:focus-visible{
outline:3px solid rgba(223,88,45,.42);
outline-offset:2px;
}
.home-city-search{
display:grid;
gap:6px;
margin-top:14px;
color:#354643;
font-size:var(--t-micro);
font-weight:900;
}
.home-city-search input{
width:100%;
min-height:48px;
padding:0 15px;
border:1px solid rgba(24,39,40,.16);
border-radius:12px;
background:#fff;
color:#182a29;
font:inherit;
font-size:var(--t-small);
font-weight:700;
}
.home-city-search input::placeholder{ color:#8a9493; }
.home-city-search input:focus{
border-color:#268a73;
box-shadow:0 0 0 4px rgba(38,138,115,.12);
}
.home-city-results{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:14px;
}
.home-city-results a{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-width:0;
min-height:46px;
padding:10px 12px;
border:1px solid rgba(24,39,40,.10);
border-radius:11px;
background:#fbfcfb;
color:#314441;
font-size:var(--t-small);
font-weight:850;
}
.home-city-results a:hover{
border-color:rgba(23,103,84,.32);
background:#edf7f3;
color:#105b4b;
transform:translateY(-1px);
}
.home-city-results a[hidden]{ display:none; }
.home-city-results a span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.home-city-results a b{
flex:0 0 auto;
color:#16846d;
}
.home-city-empty{
margin:14px 0 0;
padding:16px;
border:1px dashed rgba(24,39,40,.18);
border-radius:12px;
background:#f8faf9;
color:#5c6968 !important;
text-align:center;
}
.home-city-finder-footer{
margin-top:16px;
padding-top:14px;
border-top:1px solid rgba(24,39,40,.10);
}
.home-city-finder-footer a{
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
padding:0 14px;
border-radius:11px;
background:#fff1eb;
color:#a53f20;
font-size:var(--t-small);
font-weight:900;
}
.home-city-finder-footer a:hover{ background:#df582d; color:#fff; }
.price-lead{
display:grid;
grid-template-columns:minmax(280px,.8fr) minmax(0,1fr);
gap:28px;
align-items:stretch;
}
.price-box,
.price-list{
padding:28px;
border-radius:20px;
background:#fff;
border:1px solid rgba(24,39,40,.10);
box-shadow:0 14px 38px rgba(24,39,40,.06);
}
.price-list{ display:grid; align-content:center; gap:0; }
.price-list div{
display:flex;
justify-content:space-between;
gap:16px;
padding:15px 0;
border-bottom:1px solid rgba(24,39,40,.10);
}
.price-list div:last-child{ border-bottom:0; }
.price-list span{ color:var(--brand-dark); font-weight:900; text-align:right; }
.faq-section .faq{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.faq-section .faq details{
margin:0;
border-radius:16px;
padding:18px 20px;
}
.faq-section .faq details[open]{
border-color:rgba(25,133,111,.24);
box-shadow:0 14px 34px rgba(24,39,40,.06);
}
.final-lead{
display:grid;
grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr);
gap:42px;
align-items:center;
margin-bottom:34px;
padding:42px;
overflow:hidden;
border-radius:20px;
background:#154f47;
color:#fff;
box-shadow:0 22px 52px rgba(24,39,40,.13);
}
.final-copy{ min-width:0; max-width:430px; }
.final-copy h2{ font-size:var(--t-display); line-height:1.08; }
.final-copy .eyebrow{ color:#a4e3d4; }
.final-copy p{ margin-top:14px; color:rgba(255,255,255,.80); }
.final-copy ul{
list-style:none;
margin:24px 0 0;
padding:0;
display:grid;
gap:12px;
}
.final-copy li{
position:relative;
padding-left:28px;
color:rgba(255,255,255,.86);
line-height:1.5;
}
.final-copy li::before{
content:"";
position:absolute;
left:0;
top:.45em;
width:10px;
height:10px;
border-radius:50%;
background:var(--accent);
}
.lead-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
min-width:0;
padding:26px;
border-radius:16px;
background:#fff;
color:#172828;
box-shadow:0 18px 44px rgba(10,38,34,.18);
}
.lead-form textarea{ min-height:118px; resize:vertical; }
.lead-form .span-2{ grid-column:1 / -1; }
.form-note{
margin:0;
color:#687373;
font-size:var(--t-small);
line-height:1.5;
}
@media (max-width:1024px){
.scenario-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.trust-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1024px){
.story-grid,
.cities-panel,
.price-lead,
.final-lead,
.section-intro,
.home-editorial-layout{
grid-template-columns:1fr;
}
.home-editorial-layout{ gap:32px; }
.home-editorial-intro{ max-width:640px; }
.scenario-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-media{ min-height:400px; }
.final-copy{ max-width:none; }
.home-city-finder{ width:100%; max-width:760px; }
}
@media (max-width:760px){
.hero-shell{
grid-template-columns:1fr;
gap:24px;
}
.hero-copy{ padding-top:8px; }
.hero-aside{
width:100%;
max-width:680px;
margin:0 auto;
}
.hero-photo{ height:320px; }
}
@media (max-width:760px){
:where(.home-page) section{ padding:36px 0; }
.home-hero{ padding:28px 0 36px; }
.hero-copy h1{ font-size:var(--t-display); line-height:1.04; }
.hero-lead{ margin:14px 0 18px; font-size:var(--t-small); line-height:1.58; }
.hero-actions{ display:grid; grid-template-columns:1fr; }
.quick-fields,
.scenario-grid,
.trust-grid,
.faq-section .faq,
.lead-form{
grid-template-columns:1fr;
}
.trust-strip{ grid-template-columns:1fr 1fr; gap:8px; }
.trust-chip{ min-height:46px; padding:10px 11px; font-size:var(--t-micro); }
.trust-chip span{ width:8px; height:8px; box-shadow:0 0 0 4px rgba(25,133,111,.12); }
.hero-photo{ display:none; }
.quick-fields label:first-child,
.lead-form .span-2{ grid-column:auto; }
.scenario-grid{ padding:8px; border-radius:18px; }
.scenario-card{ min-height:auto; padding:18px; }
.home-editorial-layout{ gap:20px; }
.home-editorial-intro p{ margin-bottom:0; }
.home-editorial-item summary{
grid-template-columns:40px minmax(0,1fr) 32px;
gap:12px;
padding:18px 0;
}
.home-editorial-number{ width:40px; height:40px; }
.home-editorial-toggle{ width:32px; height:32px; }
.home-editorial-body{ padding:0 0 22px; }
.story-media{ min-height:280px; border-radius:18px; }
.process-list article{ grid-template-columns:44px minmax(0,1fr); gap:12px; padding:14px; }
.process-list span{ width:38px; height:38px; }
.cities-panel,
.final-lead{ padding:22px; border-radius:20px; }
.cities-panel{ gap:24px; }
.home-city-finder{ padding:16px; border-radius:17px; }
.home-city-service-switch{
grid-template-columns:repeat(3,minmax(124px,1fr));
overflow-x:auto;
scroll-snap-type:x proximity;
scrollbar-width:thin;
}
.home-city-service-switch button{ scroll-snap-align:start; }
.home-city-results{ gap:7px; }
.final-copy h2{ font-size:var(--t-display); }
.final-lead{ gap:24px; }
.lead-form{ gap:12px; padding:18px; }
.price-box,
.price-list{ padding:22px; }
.price-list div{ display:grid; gap:4px; }
.price-list span{ text-align:left; }
}
@media (max-width:480px){
.cities-panel{ padding:18px; }
.cities-stats{ display:grid; grid-template-columns:1fr 1fr; }
.cities-stats span{ min-width:0; }
.home-city-finder-top{ align-items:flex-start; }
.home-city-service-switch{
grid-template-columns:1fr;
overflow:visible;
}
.home-city-results{ grid-template-columns:1fr; }
.home-city-finder-footer{
align-items:flex-start;
flex-direction:column;
}
.home-city-finder-footer a{ width:100%; justify-content:center; }
}
/* ===== Pricing page ===== */
.pricing-page{
background:#f7f4ef;
color:var(--ink);
}
.pricing-hero{
padding:54px 0 58px;
background:#eef4f0;
border-bottom:1px solid var(--line);
}
.pricing-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
gap:64px;
align-items:center;
}
.pricing-kicker,
.pricing-section-head>div>span,
.pricing-table-head>span,
.pricing-faq header>span{
display:inline-flex;
align-items:center;
gap:9px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
}
.pricing-kicker{ margin:5px 0 18px; }
.pricing-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 5px rgba(25,133,111,.11);
}
.pricing-hero h1{
max-width:720px;
font-size:var(--t-display);
line-height:1.02;
letter-spacing:0;
}
.pricing-lead{
max-width:700px;
margin:18px 0 0;
color:#526161;
font-size:var(--t-body);
line-height:1.7;
}
.pricing-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
margin-top:26px;
}
.pricing-facts{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:28px;
}
.pricing-facts>div{
min-height:112px;
padding:17px 19px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
}
.pricing-facts strong{
display:block;
margin-bottom:5px;
color:var(--brand-dark);
font-size:var(--t-h3);
}
.pricing-facts span{
display:block;
color:#607070;
font-size:var(--t-small);
line-height:1.48;
}
.pricing-example{
padding:30px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 20px 48px rgba(24,39,40,.11);
}
.pricing-example>span{
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-transform:uppercase;
}
.pricing-example h2{
margin:9px 0 5px;
font-size:var(--t-h3);
line-height:1.25;
}
.pricing-example>p{
margin:0 0 18px;
color:var(--muted);
font-size:var(--t-small);
}
.pricing-example dl{ margin:0; }
.pricing-example dl>div{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:12px 0;
border-bottom:1px solid var(--line);
}
.pricing-example dt{ color:#5f6d6d; }
.pricing-example dd{
margin:0;
color:var(--ink);
font-weight:900;
font-variant-numeric:tabular-nums;
}
.pricing-example-total{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin:18px -10px -10px;
padding:17px 18px;
background:var(--brand-soft);
border-radius:7px;
}
.pricing-example-total span{
max-width:210px;
color:#375550;
font-size:var(--t-small);
line-height:1.45;
}
.pricing-example-total strong{
flex:0 0 auto;
color:var(--brand-dark);
font-size:var(--t-h3);
}
.pricing-jump{
position:sticky;
top:148px;
z-index:20;
padding:0;
background:rgba(247,244,239,.96);
border-bottom:1px solid var(--line);
backdrop-filter:blur(10px);
}
.pricing-jump .wrap{
display:flex;
gap:7px;
padding-block:10px;
overflow-x:auto;
scrollbar-width:none;
}
.pricing-jump .wrap::-webkit-scrollbar{ display:none; }
.pricing-jump a{
flex:0 0 auto;
padding:8px 13px;
background:#fff;
border:1px solid var(--line);
border-radius:999px;
color:#566565;
font-size:var(--t-micro);
font-weight:800;
white-space:nowrap;
}
.pricing-jump a:hover{
color:var(--brand-dark);
border-color:rgba(25,133,111,.34);
background:var(--brand-soft);
}
.pricing-section{
padding:66px 0;
scroll-margin-top:210px;
background:#f7f4ef;
border-bottom:1px solid var(--line);
}
.pricing-section-light{ background:#fff; }
.pricing-section-head{
display:grid;
grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);
gap:48px;
align-items:end;
margin-bottom:28px;
}
.pricing-section-head h2,
.pricing-table-head h2,
.pricing-faq h2{
margin-top:8px;
font-size:var(--t-display);
line-height:1.1;
letter-spacing:0;
}
.pricing-section-head>p,
.pricing-table-head>p,
.pricing-faq header>p,
.pricing-section-copy{
margin:0;
color:#5c6b6b;
line-height:1.68;
}
.pricing-calc-example{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:20px;
align-items:center;
margin-bottom:18px;
padding:22px 26px;
background:#174f47;
color:#fff;
border-radius:8px;
}
.pricing-calc-example>div{
display:flex;
flex-direction:column;
gap:4px;
}
.pricing-calc-example span{ color:rgba(255,255,255,.76); font-size:var(--t-small); }
.pricing-calc-example>span{ color:#8fd3c0; font-size:var(--t-h3); }
.pricing-factor-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
overflow:hidden;
border:1px solid var(--line);
border-radius:8px;
}
.pricing-factor-grid article{
min-height:195px;
padding:24px;
background:#fff;
border-right:1px solid var(--line);
}
.pricing-factor-grid article:last-child{ border-right:0; }
.pricing-factor-grid b{
display:grid;
place-items:center;
width:40px;
height:40px;
margin-bottom:22px;
background:var(--brand-soft);
border-radius:8px;
color:var(--brand-dark);
font-size:var(--t-micro);
}
.pricing-factor-grid h3{ margin-bottom:8px; font-size:var(--t-body); }
.pricing-factor-grid p{ margin:0; color:#627070; font-size:var(--t-small); line-height:1.58; }
.pricing-scope-note{
display:grid;
grid-template-columns:230px 1fr;
gap:28px;
margin-top:18px;
padding:20px 24px;
background:#f8efe8;
border-left:4px solid var(--accent);
}
.pricing-scope-note p{ margin:0; color:#596767; line-height:1.6; }
.pricing-scope-note a{ color:var(--brand-dark); font-weight:900; text-decoration:underline; text-underline-offset:3px; }
.pricing-table-head{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);
gap:10px 52px;
align-items:end;
margin-bottom:24px;
}
.pricing-table-head>span{ grid-column:1/-1; }
.pricing-note{
display:inline-flex;
margin-bottom:18px;
padding:12px 16px;
background:var(--brand-soft);
border-radius:7px;
color:#375550;
font-size:var(--t-small);
font-weight:700;
}
.pricing-table-wrap{
width:100%;
overflow:hidden;
margin-bottom:24px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 12px 34px rgba(24,39,40,.06);
}
.pricing-table{
width:100%;
border-collapse:collapse;
font-size:var(--t-small);
}
.pricing-table thead{ background:var(--brand-soft); }
.pricing-table thead th{
padding:15px 17px;
color:var(--brand-dark);
font-size:var(--t-micro);
font-weight:900;
text-align:right;
text-transform:uppercase;
white-space:nowrap;
}
.pricing-table thead th:first-child,
.pricing-table thead th:nth-child(2){ text-align:left; }
.pricing-table tbody th,
.pricing-table tbody td{
padding:14px 17px;
border-top:1px solid var(--line);
}
.pricing-table tbody tr:first-child th,
.pricing-table tbody tr:first-child td{ border-top:0; }
.pricing-table tbody th{ text-align:left; }
.pricing-table tbody td{
text-align:right;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.pricing-table tbody tr:hover{ background:#fbfaf7; }
.pricing-table .pricing-day{ text-align:left; color:var(--brand-dark); }
.pricing-day-value{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.pricing-day-value>span{ font-size:var(--t-micro); }
.pricing-day-value strong{ font-size:var(--t-body); }
.pricing-day-value small{ color:#697777; }
.pricing-period-caption{display:none;}
.pricing-table thead th[scope="colgroup"]{text-align:center;border-left:1px solid var(--line);}
.pricing-table thead tr:nth-child(2) th{text-align:right;}
.pricing-example-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:var(--t-micro);}
.pricing-example-table :is(th,td){padding:9px 0;border-bottom:1px solid var(--line);text-align:left;}
.pricing-example-table tbody th{font-weight:400;}
.pricing-example-table :is(th,td):last-child{text-align:right;}
.pricing-example-table td{font-weight:700;white-space:nowrap;}
.service-price-preview{width:100%;border-collapse:collapse;}
.service-price-preview caption{text-align:left;font-weight:700;margin-bottom:12px;}
.service-price-preview tbody th{font-weight:400;text-align:left;}
.service-price-preview td{text-align:right;white-space:nowrap;}
.pricing-live-table{ max-width:100%; }
.pricing-subtitle{
margin:34px 0 13px;
padding-left:14px;
border-left:3px solid var(--brand);
font-size:var(--t-lead);
}
.pricing-section-copy{ max-width:760px; margin-bottom:16px; }
.pricing-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.pricing-card-grid article{
min-height:245px;
padding:24px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
}
.pricing-card-grid article.is-accent{ background:#f7e8dd; border-color:#edd2c1; }
.pricing-card-grid h3{ margin-bottom:15px; font-size:var(--t-body); }
.pricing-card-grid ul,
.pricing-included-grid ul{
margin:0;
padding-left:19px;
color:#5c6969;
font-size:var(--t-small);
line-height:1.58;
}
.pricing-card-grid li,
.pricing-included-grid li{ margin:7px 0; }
.pricing-card-grid strong{ color:var(--ink); }
.pricing-disclaimer{
margin:18px 0 0;
padding:15px 18px;
background:#edf3ef;
border-radius:7px;
color:#566565;
font-size:var(--t-small);
line-height:1.6;
}
.pricing-included-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
overflow:hidden;
border:1px solid var(--line);
border-radius:8px;
}
.pricing-included-grid article{
min-height:295px;
padding:26px;
background:#fff;
border-right:1px solid var(--line);
}
.pricing-included-grid article:last-child{ border-right:0; }
.pricing-included-grid>article>span{
display:grid;
place-items:center;
width:42px;
height:42px;
margin-bottom:24px;
background:#176f61;
border-radius:50%;
color:#fff;
font-size:var(--t-micro);
font-weight:900;
}
.pricing-included-grid h3{ margin-bottom:14px; font-size:var(--t-lead); }
.pricing-faq{
padding:68px 0;
background:#edf3ef;
border-block:1px solid var(--line);
}
.pricing-faq-grid{
display:grid;
grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);
gap:68px;
align-items:start;
}
.pricing-faq header>p{ margin-top:14px; }
.pricing-faq .faq details{ border-radius:8px; box-shadow:none; }
.pricing-final{ padding:54px 0 30px; background:#f7f4ef; }
.pricing-final-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:42px;
padding:36px 40px;
background:#154f47;
border-radius:8px;
color:#fff;
}
.pricing-final-inner>div:first-child{ max-width:720px; }
.pricing-final-inner>div:first-child>span{ color:#a9ded2; font-size:var(--t-micro); font-weight:900; text-transform:uppercase; }
.pricing-final h2{ margin-top:8px; font-size:var(--t-display); line-height:1.1; }
.pricing-final p{ margin:10px 0 0; color:rgba(255,255,255,.77); line-height:1.6; }
.pricing-final-inner>div:last-child{ display:flex; flex:0 0 auto; align-items:center; gap:16px; }
.pricing-final-inner>div:last-child>a{ color:#fff; font-weight:900; white-space:nowrap; }
.pricing-footer-note{
padding-top:18px;
color:#657272 !important;
font-size:var(--t-micro);
text-align:center;
}
@media (max-width:1024px){
.pricing-hero-grid{ grid-template-columns:1fr 1fr; gap:32px; }
.pricing-section-head,
.pricing-table-head{ grid-template-columns:1fr; gap:12px; }
.pricing-table-head>span{ grid-column:auto; }
.pricing-factor-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pricing-factor-grid article:nth-child(2){ border-right:0; }
.pricing-factor-grid article:nth-child(-n+2){ border-bottom:1px solid var(--line); }
.pricing-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pricing-faq-grid{ gap:36px; }
}
@media (max-width:760px){
.pricing-hero{ padding:30px 0 36px; }
.pricing-hero-grid{ grid-template-columns:1fr; gap:24px; }
.pricing-hero h1{ font-size:var(--t-display); }
.pricing-lead{ font-size:var(--t-small); line-height:1.62; }
.pricing-actions{ display:grid; grid-template-columns:1fr; }
.pricing-actions>*{ width:100%; justify-content:center; text-align:center; }
.pricing-facts{ margin-top:20px; }
.pricing-facts>div{ min-height:0; padding:15px; }
.pricing-example{ padding:22px 18px; }
.pricing-jump{ top:64px; }
.pricing-section{ padding:44px 0; scroll-margin-top:126px; }
.pricing-section-head h2,
.pricing-table-head h2,
.pricing-faq h2{ font-size:var(--t-h2); }
.pricing-calc-example{ grid-template-columns:1fr; gap:14px; padding:20px; }
.pricing-calc-example>span{ transform:rotate(90deg); justify-self:start; }
.pricing-scope-note{ grid-template-columns:1fr; gap:8px; padding:18px; }
.pricing-table-wrap{ overflow:visible; background:transparent; border:0; box-shadow:none; }
.pricing-table,
.pricing-table tbody,
.pricing-table tr,
.pricing-table th,
.pricing-table td{ display:block; width:100%; }
.pricing-table thead{ display:none; }
.pricing-table tbody{ display:grid; gap:10px; }
.pricing-table tbody tr{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 14px;
padding:17px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 8px 22px rgba(24,39,40,.05);
}
.pricing-table tbody th,
.pricing-table tbody td,
.pricing-table tbody tr:first-child th,
.pricing-table tbody tr:first-child td{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding:8px 0;
border:0;
border-top:1px solid var(--line);
text-align:right;
white-space:normal;
}
.pricing-table tbody th{
grid-column:1/-1;
padding-top:0;
border-top:0;
font-size:var(--t-body);
text-align:left;
}
.pricing-table tbody td::before{
content:attr(data-label);
color:#6a7777;
font-size:var(--t-micro);
font-weight:600;
text-align:left;
}
.pricing-table .pricing-day{ grid-column:1/-1; }
.pricing-table .pricing-day::before{ margin-right:auto; }
.pricing-table .pricing-day-value{ margin-left:auto; }
.pricing-table tbody td{grid-column:1/-1;}
.pricing-table tbody td.pricing-period-first{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:10px;}
.pricing-period-first .pricing-period-caption{display:block;grid-column:1/-1;grid-row:1;text-align:left;color:var(--ink);font-size:var(--t-small);font-weight:700;}
.pricing-table tbody td.pricing-period-first::before{grid-column:1;grid-row:2;}
.pricing-period-first>strong{grid-column:2;grid-row:2;}
.pricing-live-table tbody tr{ grid-template-columns:1fr; }
.pricing-live-table tbody th,
.pricing-live-table tbody td{ grid-column:1; }
.pricing-card-grid,
.pricing-included-grid,
.pricing-faq-grid{ grid-template-columns:1fr; }
.pricing-card-grid article{ min-height:0; padding:20px; }
.pricing-included-grid article{ min-height:0; padding:22px; border-right:0; border-bottom:1px solid var(--line); }
.pricing-included-grid article:last-child{ border-bottom:0; }
.pricing-faq{ padding:44px 0; }
.pricing-final{ padding:34px 0 22px; }
.pricing-final-inner{ display:grid; gap:24px; padding:26px 20px; }
.pricing-final-inner>div:last-child{ display:grid; width:100%; }
.pricing-final-inner>div:last-child>*{ width:100%; justify-content:center; text-align:center; }
}
@media (max-width:480px){
.pricing-facts{ grid-template-columns:1fr; }
.pricing-factor-grid{ grid-template-columns:1fr; }
.pricing-factor-grid article{ min-height:0; border-right:0; border-bottom:1px solid var(--line); }
.pricing-factor-grid article:last-child{ border-bottom:0; }
.pricing-card-grid{ grid-template-columns:1fr; }
.pricing-table tbody tr{ grid-template-columns:1fr; }
.pricing-table tbody td{ grid-column:1; }
.pricing-table .pricing-day{ grid-column:1; }
}
/* ===== Services catalogue ===== */
.service-catalog-card{
min-width:0;
overflow:hidden;
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
box-shadow:0 12px 30px rgba(24,39,40,.06);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.service-catalog-card:hover{
transform:translateY(-3px);
border-color:rgba(25,133,111,.32);
box-shadow:0 18px 38px rgba(24,39,40,.10);
}
.service-catalog-card>a{
height:100%;
display:flex;
flex-direction:column;
}
.service-catalog-photo{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:#dfe9e4;
}
.service-catalog-photo::after{
content:"";
position:absolute;
inset:auto 0 0;
height:34%;
background:linear-gradient(180deg,rgba(16,52,46,0),rgba(16,52,46,.16));
pointer-events:none;
}
.service-catalog-photo img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.service-catalog-card:hover .service-catalog-photo img{
transform:scale(1.035);
}
.service-catalog-body{
flex:1;
display:flex;
flex-direction:column;
padding:20px 20px 19px;
}
.service-catalog-body h3{
min-height:2.65em;
margin-bottom:9px;
font-size:var(--t-body);
line-height:1.32;
}
.service-catalog-body p{
display:-webkit-box;
min-height:4.65em;
margin:0 0 17px;
overflow:hidden;
color:#5b6868;
font-size:var(--t-small);
line-height:1.55;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
.service-catalog-more{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:auto;
color:var(--brand-dark);
font-size:var(--t-small);
font-weight:900;
}
.service-catalog-more b{
font-size:var(--t-body);
transition:transform .2s ease;
}
.service-catalog-card:hover .service-catalog-more b{
transform:translateX(4px);
}
@media (max-width:760px){
.service-catalog-card>a{ display:grid; grid-template-columns:118px minmax(0,1fr); }
.service-catalog-photo{ height:100%; min-height:174px; aspect-ratio:auto; }
.service-catalog-body{ padding:16px 15px; }
.service-catalog-body h3{ min-height:0; margin-bottom:7px; font-size:var(--t-body); }
.service-catalog-body p{ min-height:0; margin-bottom:12px; font-size:var(--t-small); line-height:1.48; -webkit-line-clamp:3; }
.service-catalog-more{ font-size:var(--t-micro); }
}
@media (max-width:480px){
.service-catalog-card>a{ grid-template-columns:102px minmax(0,1fr); }
.service-catalog-photo{ min-height:182px; }
}
/* ===== Service city directory ===== */
.service-city-section{
padding:72px 0 78px;
background:#edf2ee;
border-top:1px solid rgba(24,39,40,.07);
border-bottom:1px solid rgba(24,39,40,.07);
}
.service-city-head{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
gap:42px;
align-items:end;
margin-bottom:28px;
}
.service-city-head .eyebrow{
margin-bottom:9px;
}
.service-city-head h2{
font-size:var(--t-display);
line-height:1.08;
letter-spacing:0;
}
.service-city-head p{
max-width:520px;
margin:0;
color:#586666;
line-height:1.7;
}
.service-city-featured{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.service-city-card{
position:relative;
min-height:178px;
overflow:hidden;
border-radius:8px;
background:#d7e5df;
box-shadow:0 12px 28px rgba(24,39,40,.09);
}
.service-city-card::after{
content:"";
position:absolute;
inset:34% 0 0;
background:linear-gradient(180deg,rgba(12,38,35,0),rgba(12,38,35,.83));
pointer-events:none;
}
.service-city-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.service-city-card>span{
position:absolute;
left:16px;
right:16px;
bottom:14px;
z-index:1;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
color:#fff;
}
.service-city-card h3{
font-size:var(--t-body);
line-height:1.25;
}
.service-city-card small{
color:rgba(255,255,255,.76);
font-size:var(--t-micro);
font-weight:700;
white-space:nowrap;
}
.service-city-card:hover img{
transform:scale(1.045);
}
.service-city-all{
margin-top:22px;
}
.service-city-all>summary{
min-height:64px;
display:grid;
grid-template-columns:minmax(0,1fr) auto 22px;
gap:14px;
align-items:center;
padding:16px 20px;
border:1px solid rgba(24,39,40,.12);
border-radius:8px;
background:#fff;
color:#18302f;
cursor:pointer;
list-style:none;
box-shadow:0 10px 24px rgba(24,39,40,.05);
}
.service-city-all>summary::-webkit-details-marker{
display:none;
}
.service-city-all>summary>span{
font-size:var(--t-body);
font-weight:900;
}
.service-city-all>summary>b{
color:#667373;
font-size:var(--t-small);
}
.service-city-all>summary>i{
position:relative;
width:20px;
height:20px;
}
.service-city-all>summary>i::before,
.service-city-all>summary>i::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
border-radius:4px;
background:var(--brand);
transform:translate(-50%,-50%);
}
.service-city-all>summary>i::after{
transform:translate(-50%,-50%) rotate(90deg);
transition:transform .2s ease;
}
.service-city-all[open]>summary>i::after{
transform:translate(-50%,-50%) rotate(0deg);
}
.service-city-directory{
margin-top:10px;
overflow:hidden;
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
}
.service-city-search{
display:block;
padding:16px;
border-bottom:1px solid rgba(24,39,40,.10);
background:#f8faf8;
}
.service-city-search input{
width:100%;
min-height:48px;
padding:11px 14px;
border:1px solid rgba(24,39,40,.16);
border-radius:8px;
background:#fff;
color:#182728;
outline:none;
}
.service-city-search input:focus{
border-color:rgba(25,133,111,.65);
box-shadow:0 0 0 4px rgba(25,133,111,.11);
}
.service-city-links{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.service-city-links a{
min-width:0;
min-height:50px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:11px 14px;
border-right:1px solid rgba(24,39,40,.09);
border-bottom:1px solid rgba(24,39,40,.09);
color:#344444;
font-size:var(--t-small);
font-weight:700;
}
.service-city-links a:nth-child(4n){
border-right:0;
}
.service-city-links a:hover{
background:var(--brand-soft);
color:var(--brand-dark);
}
.service-city-links a[hidden]{
display:none;
}
.service-city-links a span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.service-city-links a b{
flex:0 0 auto;
color:var(--brand);
}
.service-city-empty{
margin:0;
padding:22px;
color:#687474;
text-align:center;
}
@media (max-width:1024px){
.service-city-head{
grid-template-columns:1fr;
gap:12px;
align-items:start;
}
.service-city-head p{ max-width:700px; }
.service-city-featured{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.service-city-card{ min-height:205px; }
.service-city-links{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-city-links a:nth-child(4n){ border-right:1px solid rgba(24,39,40,.09); }
.service-city-links a:nth-child(3n){ border-right:0; }
}
@media (max-width:760px){
.service-city-section{ padding:44px 0 48px; }
.service-city-head{ margin-bottom:20px; }
.service-city-head h2{ font-size:var(--t-h2); }
.service-city-head p{ font-size:var(--t-small); line-height:1.6; }
.service-city-featured{ gap:10px; }
.service-city-card{ min-height:142px; }
.service-city-card>span{
left:12px;
right:12px;
bottom:11px;
display:block;
}
.service-city-card h3{ font-size:var(--t-small); }
.service-city-card small{ display:block; margin-top:2px; font-size:var(--t-micro); }
.service-city-all>summary{
grid-template-columns:minmax(0,1fr) 20px;
min-height:58px;
padding:14px 16px;
}
.service-city-all>summary>b{ display:none; }
.service-city-links{ grid-template-columns:1fr; }
.service-city-links a,
.service-city-links a:nth-child(3n),
.service-city-links a:nth-child(4n){
border-right:0;
}
}
/* ===== City catalogue ===== */
.city-index-page{
background:#f7f4ef;
}
.city-index-hero{
padding:54px 0 58px;
background:#edf3ef;
border-bottom:1px solid rgba(24,39,40,.08);
}
.city-index-hero-inner{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
gap:64px;
align-items:end;
}
.city-index-hero .breadcrumbs{
margin-bottom:24px;
}
.city-index-hero h1{
max-width:760px;
margin-top:8px;
font-size:var(--t-display);
line-height:1.02;
letter-spacing:0;
}
.city-index-hero .lead{
max-width:720px;
margin:18px 0 24px;
font-size:var(--t-body);
}
.city-index-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.city-index-phone{
display:inline-flex;
align-items:center;
min-height:48px;
padding:11px 18px;
border:1px solid rgba(24,39,40,.14);
border-radius:8px;
background:#fff;
color:#18302f;
font-weight:900;
}
.city-index-directions{
display:grid;
gap:0;
border-top:1px solid rgba(24,39,40,.12);
border-bottom:1px solid rgba(24,39,40,.12);
}
.city-index-directions span{
display:flex;
align-items:center;
gap:12px;
min-height:58px;
border-bottom:1px solid rgba(24,39,40,.10);
color:#233838;
font-weight:800;
}
.city-index-directions span:last-child{
border-bottom:0;
}
.city-index-directions i{
width:10px;
height:10px;
flex:0 0 auto;
border-radius:50%;
background:var(--brand);
box-shadow:0 0 0 6px rgba(25,133,111,.10);
}
.city-index-featured{
padding-top:72px;
padding-bottom:78px;
}
.city-index-section-head{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
gap:44px;
align-items:end;
margin-bottom:28px;
}
.city-index-section-head .eyebrow{
display:block;
margin-bottom:8px;
}
.city-index-section-head h2{
font-size:var(--t-display);
line-height:1.08;
letter-spacing:0;
}
.city-index-section-head p{
max-width:540px;
margin:0;
color:#5c6969;
line-height:1.7;
}
.city-index-featured-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.city-index-featured-card{
min-width:0;
overflow:hidden;
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
box-shadow:0 12px 28px rgba(24,39,40,.06);
transition:transform .25s ease,box-shadow .25s ease;
}
.city-index-featured-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 38px rgba(24,39,40,.10);
}
.city-index-featured-photo{
position:relative;
display:block;
aspect-ratio:16/10;
overflow:hidden;
background:#dfe9e4;
}
.city-index-featured-photo::after{
content:"";
position:absolute;
inset:42% 0 0;
background:linear-gradient(180deg,rgba(9,35,32,0),rgba(9,35,32,.82));
}
.city-index-featured-photo img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.city-index-featured-card:hover img{
transform:scale(1.04);
}
.city-index-featured-photo strong{
position:absolute;
left:16px;
right:16px;
bottom:13px;
z-index:1;
color:#fff;
font-size:var(--t-lead);
line-height:1.2;
}
.city-index-featured-links{
display:grid;
padding:8px 14px 10px;
}
.city-index-featured-links a{
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-height:42px;
border-bottom:1px solid rgba(24,39,40,.09);
color:#354747;
font-size:var(--t-small);
font-weight:800;
}
.city-index-featured-links a:last-child{
border-bottom:0;
}
.city-index-featured-links a:hover{
color:var(--brand-dark);
}
.city-index-featured-links span{
color:var(--brand);
}
.city-index-directory-section{
padding:72px 0 78px;
background:#eaf1ed;
border-top:1px solid rgba(24,39,40,.08);
border-bottom:1px solid rgba(24,39,40,.08);
}
.city-index-directory{
overflow:hidden;
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
box-shadow:0 16px 38px rgba(24,39,40,.07);
}
.city-index-directory-tools{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);
gap:20px;
align-items:end;
padding:20px;
border-bottom:1px solid rgba(24,39,40,.10);
background:#f9faf8;
}
.city-index-tabs{
display:inline-grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:4px;
padding:4px;
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
}
.city-index-tabs button{
min-height:44px;
padding:8px 16px;
border:0;
border-radius:6px;
background:transparent;
color:#516060;
cursor:pointer;
font-size:var(--t-small);
font-weight:900;
}
.city-index-tabs button[aria-selected="true"]{
background:var(--deep);
color:#fff;
}
.city-index-tabs button:focus-visible{
outline:3px solid rgba(223,88,45,.42);
outline-offset:2px;
}
.city-index-search{
display:grid;
gap:7px;
color:#394949;
font-size:var(--t-micro);
font-weight:800;
}
.city-index-search input{
width:100%;
min-height:48px;
padding:11px 14px;
border:1px solid rgba(24,39,40,.15);
border-radius:8px;
background:#fff;
color:#182728;
outline:none;
}
.city-index-search input:focus{
border-color:rgba(25,133,111,.65);
box-shadow:0 0 0 4px rgba(25,133,111,.11);
}
.city-index-panel-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:56px;
padding:13px 20px;
border-bottom:1px solid rgba(24,39,40,.09);
}
.city-index-panel-meta strong{
font-size:var(--t-small);
}
.city-index-panel-meta span{
color:#6d7a7a;
font-size:var(--t-micro);
font-weight:800;
}
.city-index-links{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
max-height:580px;
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:var(--brand) #eef2ef;
}
.city-index-links::-webkit-scrollbar{
width:9px;
}
.city-index-links::-webkit-scrollbar-thumb{
border:2px solid #eef2ef;
border-radius:8px;
background:var(--brand);
}
.city-index-links a{
min-width:0;
min-height:50px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:11px 14px;
border-right:1px solid rgba(24,39,40,.09);
border-bottom:1px solid rgba(24,39,40,.09);
color:#344444;
font-size:var(--t-small);
font-weight:750;
}
.city-index-links a:nth-child(4n){
border-right:0;
}
.city-index-links a:hover{
background:var(--brand-soft);
color:var(--brand-dark);
}
.city-index-links a:focus-visible{
outline:0;
background:var(--brand-soft);
box-shadow:inset 0 0 0 3px rgba(223,88,45,.44);
color:var(--brand-dark);
}
.city-index-links a[hidden]{
display:none;
}
.city-index-links a span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.city-index-links a b{
color:var(--brand);
}
.city-index-empty{
margin:0;
padding:28px 20px;
color:#677474;
text-align:center;
}
.city-index-final{
display:flex;
align-items:center;
justify-content:space-between;
gap:34px;
padding-top:62px;
padding-bottom:62px;
}
.city-index-final h2{
max-width:760px;
margin:7px 0 9px;
font-size:var(--t-display);
line-height:1.15;
}
.city-index-final p{
max-width:760px;
margin:0;
color:#5d6b6b;
line-height:1.65;
}
.city-index-final .btn-brand{
flex:0 0 auto;
}
@media (max-width:1024px){
.city-index-hero-inner{
grid-template-columns:1fr;
gap:32px;
}
.city-index-directions{
grid-template-columns:repeat(3,minmax(0,1fr));
border:1px solid rgba(24,39,40,.11);
border-radius:8px;
background:#fff;
}
.city-index-directions span{
justify-content:center;
min-height:54px;
padding:10px;
border-right:1px solid rgba(24,39,40,.10);
border-bottom:0;
text-align:center;
font-size:var(--t-small);
}
.city-index-directions span:last-child{ border-right:0; }
.city-index-section-head{
grid-template-columns:1fr;
gap:12px;
align-items:start;
}
.city-index-featured-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.city-index-directory-tools{
grid-template-columns:1fr;
}
.city-index-links{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.city-index-links a:nth-child(4n){ border-right:1px solid rgba(24,39,40,.09); }
.city-index-links a:nth-child(3n){ border-right:0; }
}
@media (max-width:760px){
.city-index-hero{
padding:30px 0 38px;
}
.city-index-hero .breadcrumbs{
margin-bottom:18px;
}
.city-index-hero h1{
font-size:var(--t-display);
}
.city-index-hero .lead{
font-size:var(--t-small);
}
.city-index-actions{
display:grid;
grid-template-columns:1fr;
}
.city-index-actions>*{
width:100%;
justify-content:center;
text-align:center;
}
.city-index-directions{
grid-template-columns:1fr;
}
.city-index-directions span{
justify-content:flex-start;
min-height:48px;
padding:10px 14px;
border-right:0;
border-bottom:1px solid rgba(24,39,40,.10);
text-align:left;
}
.city-index-directions span:last-child{ border-bottom:0; }
.city-index-featured,
.city-index-directory-section{
padding-top:46px;
padding-bottom:50px;
}
.city-index-section-head{
margin-bottom:20px;
}
.city-index-section-head h2{
font-size:var(--t-h2);
}
.city-index-section-head p{
font-size:var(--t-small);
}
.city-index-featured-grid{
gap:10px;
}
.city-index-featured-photo{
aspect-ratio:1/1;
}
.city-index-featured-photo strong{
left:12px;
right:12px;
bottom:11px;
font-size:var(--t-body);
}
.city-index-featured-links{
padding:7px 11px 8px;
}
.city-index-featured-links a{
min-height:38px;
font-size:var(--t-micro);
}
.city-index-directory-tools{
padding:14px;
}
.city-index-tabs{
grid-template-columns:1fr;
}
.city-index-tabs button{
min-height:42px;
}
.city-index-links{
grid-template-columns:1fr;
max-height:500px;
overflow-y:auto;
}
.city-index-links a,
.city-index-links a:nth-child(3n),
.city-index-links a:nth-child(4n){
border-right:0;
}
.city-index-final{
display:grid;
gap:22px;
padding-top:46px;
padding-bottom:48px;
}
.city-index-final .btn-brand{
width:100%;
}
}
/* ===== Calm service system: one scale, one rhythm, one hierarchy ===== */
.service-system{
--svc-ink:#182728;
--svc-muted:#5d6b6b;
--svc-line:rgba(24,39,40,.14);
--svc-bg:#fbfaf7;
--svc-soft:#eef4f1;
--svc-deep:#0f5b4f;
--svc-display:var(--t-display);
--svc-title:var(--t-h2);
--svc-heading:var(--t-h3);
--svc-body:var(--t-body);
--svc-small:var(--t-small);
color:var(--svc-ink);
background:var(--svc-bg);
}
.service-system h1,
.service-system h2,
.service-system h3,
.service-system h4{
color:var(--svc-ink);
font-weight:700;
letter-spacing:0;
}
.service-system p,
.service-system li{
font-size:var(--svc-body);
}
.service-system section{padding:56px 0;}
.service-calm-eyebrow,
.service-calm-section-head>span,
.service-calm-path header>span{
display:block;
margin-bottom:10px;
color:var(--brand-dark);
font-size:var(--svc-small);
font-weight:700;
letter-spacing:0;
text-transform:uppercase;
}
.service-calm-hero{
padding:48px 0 58px!important;
border-bottom:1px solid var(--svc-line);
background:var(--svc-bg);
}
.service-calm-hero-grid,
.services-calm-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(380px,.85fr);
gap:58px;
align-items:center;
}
.service-calm-hero .breadcrumbs,
.services-calm-hero .breadcrumbs{margin-bottom:18px;}
.service-calm-hero h1,
.services-calm-hero h1{
max-width:760px;
font-size:var(--svc-display);
line-height:1.04;
}
.service-calm-lead{
max-width:680px;
margin:20px 0 0;
color:var(--svc-muted);
font-size:var(--svc-body)!important;
line-height:1.7;
}
.service-calm-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:18px;
margin:26px 0 24px;
}
.service-calm-actions>a{
color:var(--brand-dark);
font-weight:700;
text-decoration:underline;
text-underline-offset:4px;
}
.service-calm-facts{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--svc-line);
border-bottom:1px solid var(--svc-line);
}
.service-calm-facts>div{padding:18px 18px 18px 0;}
.service-calm-facts>div+div{
padding-left:18px;
border-left:1px solid var(--svc-line);
}
.service-calm-facts strong{
display:block;
color:var(--brand-dark);
font-size:var(--svc-heading);
font-weight:700;
}
.service-calm-facts span{
display:block;
margin-top:5px;
color:var(--svc-muted);
font-size:var(--svc-small);
line-height:1.45;
}
.service-calm-media,
.services-calm-hero-media{
margin:0;
overflow:hidden;
border:1px solid var(--svc-line);
border-radius:8px;
background:#dfe9e4;
}
.service-calm-media img,
.services-calm-hero-media img{
width:100%;
height:430px;
object-fit:cover;
}
.service-calm-media figcaption{
padding:15px 18px;
color:var(--svc-muted);
font-size:var(--svc-small);
line-height:1.5;
background:#fff;
}
.service-calm-path{
padding:42px 0!important;
border-bottom:1px solid var(--svc-line);
background:var(--svc-soft);
}
.service-calm-path .wrap{
display:grid;
grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);
gap:56px;
align-items:start;
}
.service-calm-path h2{
max-width:430px;
font-size:var(--svc-title);
line-height:1.15;
}
.service-calm-path-list{border-top:1px solid var(--svc-line);}
.service-calm-path-list a{
display:grid;
grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);
gap:24px;
padding:17px 0;
border-bottom:1px solid var(--svc-line);
}
.service-calm-path-list a:hover h3{text-decoration:underline;text-underline-offset:4px;}
.service-calm-path-list h3{font-size:var(--svc-heading);}
.service-calm-path-list span{color:var(--svc-muted);font-size:var(--svc-small);line-height:1.55;}
.service-calm-reading{background:#fff;}
.service-calm-reading-list{border-top:1px solid var(--svc-line);}
.service-calm-reading-row{
display:grid;
grid-template-columns:minmax(260px,.66fr) minmax(0,1.34fr);
gap:64px;
padding:48px 0!important;
border-bottom:1px solid var(--svc-line);
}
.service-calm-reading-row>header>span{
display:block;
margin-bottom:14px;
color:var(--brand-dark);
font-size:var(--svc-small);
font-weight:700;
}
.service-calm-reading-row h2{
max-width:420px;
font-size:var(--svc-title);
line-height:1.16;
}
.service-calm-copy{
min-width:0;
color:var(--svc-muted);
font-size:var(--svc-body);
line-height:1.72;
}
.service-calm-copy>:first-child{margin-top:0;}
.service-calm-copy>:last-child{margin-bottom:0;}
.service-calm-copy p{margin:0 0 18px;}
.service-calm-copy h3{
margin:28px 0 10px;
font-size:var(--svc-heading);
line-height:1.35;
}
.service-calm-copy ul,
.service-calm-copy ol{
display:grid;
gap:9px;
margin:18px 0;
padding-left:22px;
}
.service-calm-copy strong{color:#263938;font-weight:700;}
.service-calm-copy a{color:var(--brand-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.service-calm-copy blockquote{
margin:22px 0;
padding:2px 0 2px 18px;
border-left:3px solid var(--brand);
color:#3e5352;
}
.service-calm-prices{
border-top:1px solid var(--svc-line);
border-bottom:1px solid var(--svc-line);
background:#f7f2eb;
}
.service-calm-section-head{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);
gap:42px;
align-items:end;
margin-bottom:28px;
}
.service-calm-section-head>span{grid-column:1/-1;margin-bottom:-26px;}
.service-calm-section-head h2{font-size:var(--svc-title);line-height:1.15;}
.service-calm-section-head p{margin:0;color:var(--svc-muted);line-height:1.65;}
.service-calm-price-body{border-top:1px solid var(--svc-line);border-bottom:1px solid var(--svc-line);}
.service-calm-price-body table{width:100%;border-collapse:collapse;}
.service-calm-price-body th,
.service-calm-price-body td{padding:15px 16px;border-bottom:1px solid var(--svc-line);text-align:left;vertical-align:top;}
.service-calm-price-body th{color:var(--brand-dark);font-size:var(--svc-small);font-weight:700;}
.service-calm-price-body td:first-child{color:var(--svc-ink);font-weight:700;}
.service-calm-price-body tr:last-child td{border-bottom:0;}
.service-calm-process{background:#fff;}
.service-calm-process-body>ol{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
margin:0;
padding:0;
border-top:1px solid var(--svc-line);
counter-reset:calm-step;
list-style:none;
}
.service-calm-process-body>ol>li{
min-height:170px;
padding:24px 24px 0 0;
counter-increment:calm-step;
}
.service-calm-process-body>ol>li::before{
content:counter(calm-step,decimal-leading-zero);
display:block;
margin-bottom:14px;
color:var(--brand-dark);
font-size:var(--svc-small);
font-weight:700;
}
.service-calm-process-body>ol>li>strong:first-child{display:block;margin-bottom:6px;font-size:var(--svc-heading);}
.service-calm-faq{border-top:1px solid var(--svc-line);background:#fff;}
.service-calm-faq-grid{
display:grid;
grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);
gap:64px;
align-items:start;
}
.service-calm-faq h2{font-size:var(--svc-title);line-height:1.15;}
.service-calm-faq header>p{max-width:430px;color:var(--svc-muted);line-height:1.65;}
.service-calm-faq details{
margin:0;
padding:19px 0;
border:0;
border-top:1px solid var(--svc-line);
border-radius:0;
background:transparent;
}
.service-calm-faq details:last-child{border-bottom:1px solid var(--svc-line);}
.service-calm-faq summary{font-size:var(--svc-heading);font-weight:700;}
.service-calm-faq details p{font-size:var(--svc-body);line-height:1.65;}
/* Catalogue: two services, three formats, then the thematic layer. */
.services-calm-page{background:var(--svc-bg);}
.services-calm-hero{padding:48px 0 58px!important;border-bottom:1px solid var(--svc-line);background:var(--svc-bg);}
.services-calm-hero-media img{height:430px;}
.services-calm-section{background:#fff;}
/* заменено явным модификатором .is-soft — см. блок 13 в конце файла */
.services-calm-primary{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:30px;
border-top:1px solid var(--svc-line);
}
.services-calm-primary>a{
display:grid;
grid-template-columns:180px minmax(0,1fr);
gap:22px;
padding:24px 0;
border-bottom:1px solid var(--svc-line);
}
.services-calm-primary img{width:180px;height:145px;border-radius:8px;object-fit:cover;}
.services-calm-primary span{display:flex;min-width:0;flex-direction:column;align-items:flex-start;}
.services-calm-primary strong{font-size:var(--svc-heading);line-height:1.35;}
.services-calm-primary small{margin:9px 0;color:var(--svc-muted);font-size:var(--svc-small);line-height:1.55;}
.services-calm-primary b{margin-top:auto;color:var(--brand-dark);font-size:var(--svc-small);}
.services-calm-primary a:hover strong{text-decoration:underline;text-underline-offset:4px;}
.services-calm-format-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--svc-line);}
.services-calm-format-list>a{display:flex;min-width:0;flex-direction:column;padding:24px 26px 24px 0;border-bottom:1px solid var(--svc-line);}
.services-calm-format-list>a+a{padding-left:26px;border-left:1px solid var(--svc-line);}
.services-calm-format-list strong{font-size:var(--svc-heading);line-height:1.35;}
.services-calm-format-list span{margin:9px 0;color:var(--svc-muted);font-size:var(--svc-small);line-height:1.55;}
.services-calm-format-list b{margin-top:auto;color:var(--brand-dark);}
.services-calm-condition-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px;border-top:1px solid var(--svc-line);}
.services-calm-condition-list>a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid var(--svc-line);}
.services-calm-condition-list h3{display:block;font-size:var(--svc-heading);line-height:1.35;}
.services-calm-condition-list small{display:block;margin-top:5px;color:var(--svc-muted);font-size:var(--svc-small);line-height:1.5;}
.services-calm-condition-list b{color:var(--brand-dark);}
.services-calm-condition-list a:hover h3{text-decoration:underline;text-underline-offset:4px;}
/* City links on the two parent services use the same flat rhythm. */
.service-system .service-city-section{padding:56px 0;background:var(--svc-soft);}
.service-system .service-city-shell{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;}
.service-system .service-city-head{margin-bottom:24px;}
.service-system .service-city-featured{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.service-system .service-city-card{border:1px solid var(--svc-line);border-radius:8px;box-shadow:none;}
.service-system .service-city-all{margin-top:20px;border-radius:0;background:transparent;box-shadow:none;}
@media (max-width:1024px){
.service-calm-hero-grid,
.services-calm-hero-grid{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);gap:34px;}
.service-calm-media img,
.services-calm-hero-media img{height:360px;}
.service-calm-reading-row{grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);gap:38px;}
.service-calm-faq-grid{gap:38px;}
.service-calm-process-body>ol{grid-template-columns:repeat(2,minmax(0,1fr));}
.services-calm-primary>a{grid-template-columns:140px minmax(0,1fr);}
.services-calm-primary img{width:140px;height:145px;}
.service-system .service-city-featured{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
.service-system section{padding:40px 0;}
.service-calm-hero,
.services-calm-hero{padding:30px 0 38px!important;}
.service-calm-hero-grid,
.services-calm-hero-grid,
.service-calm-path .wrap,
.service-calm-reading-row,
.service-calm-section-head,
.service-calm-faq-grid{grid-template-columns:1fr;gap:24px;}
.service-calm-hero .breadcrumbs,
.services-calm-hero .breadcrumbs{display:none;}
.service-calm-hero h1,
.services-calm-hero h1{font-size:var(--t-display);}
.service-calm-actions{display:grid;grid-template-columns:1fr;margin:22px 0;}
.service-calm-actions .btn-accent{width:100%;}
.service-calm-actions>a{text-align:center;}
.service-calm-facts{grid-template-columns:1fr;}
.service-calm-facts>div{padding:13px 0;}
.service-calm-facts>div+div{padding-left:0;border-top:1px solid var(--svc-line);border-left:0;}
.service-calm-media img{height:210px;}
.service-calm-media figcaption{display:none;}
.services-calm-hero-media img{height:270px;}
.service-calm-path{padding:36px 0!important;}
.service-calm-path h2,
.service-calm-reading-row h2,
.service-calm-section-head h2,
.service-calm-faq h2{font-size:var(--t-h2);}
.service-calm-path-list a{grid-template-columns:1fr;gap:5px;}
.service-calm-reading-row{padding:34px 0!important;}
.service-calm-section-head>span{grid-column:auto;margin-bottom:-14px;}
.service-calm-copy{font-size:var(--t-small);line-height:1.67;}
.service-calm-copy p,
.service-calm-copy li{font-size:var(--t-small);}
.service-calm-price-body table,
.service-calm-price-body thead,
.service-calm-price-body tbody,
.service-calm-price-body tr,
.service-calm-price-body th,
.service-calm-price-body td{display:block;width:100%;}
.service-calm-price-body thead{display:none;}
.service-calm-price-body tr{padding:15px 0;border-bottom:1px solid var(--svc-line);}
.service-calm-price-body tr:last-child{border-bottom:0;}
.service-calm-price-body th,
.service-calm-price-body td{padding:4px 0;border:0;white-space:normal;}
.service-calm-process-body>ol{grid-template-columns:1fr;border-left:1px solid var(--svc-line);border-top:0;padding-left:20px;}
.service-calm-process-body>ol>li{min-height:0;padding:0 0 28px;}
.services-calm-primary,
.services-calm-format-list,
.services-calm-condition-list{grid-template-columns:1fr;}
.services-calm-primary>a{grid-template-columns:112px minmax(0,1fr);gap:16px;}
.services-calm-primary img{width:112px;height:132px;}
.services-calm-format-list>a,
.services-calm-format-list>a+a{padding:20px 0;border-left:0;}
.service-system .service-city-featured{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
.services-calm-primary>a{grid-template-columns:1fr;}
.services-calm-primary img{width:100%;height:190px;}
.service-system .service-city-featured{grid-template-columns:1fr;}
}
/* Customer-facing service cards: readable copy, meaningful hierarchy, stable mobile layout. */
.services-calm-page .service-calm-section-head{row-gap:12px;align-items:start;}
.services-calm-page .service-calm-section-head>span{grid-column:1;margin:0;}
.services-calm-page .service-calm-section-head h2{grid-column:1;margin:0;}
.services-calm-page .service-calm-section-head p{grid-column:2;grid-row:1 / span 2;align-self:center;}
.services-calm-page .services-calm-hero-media img{height:350px;}
.services-calm-page .services-calm-primary{gap:28px;border:0;align-items:stretch;}
.services-calm-page .services-calm-primary>a{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--svc-line);border-radius:14px;overflow:hidden;background:#fff;}
.services-calm-page .services-calm-primary img{width:100%;height:250px;object-fit:cover;border-radius:0;}
.services-calm-page .service-card-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:16px;padding:26px;min-width:0;}
.services-calm-page .service-card-copy h3{margin:0;font-size:var(--t-h3);line-height:1.3;}
.services-calm-page .service-card-copy p{margin:0;color:var(--svc-muted);font-size:var(--t-body);line-height:1.65;}
.services-calm-page .service-card-link{display:inline-block;margin-top:auto;padding:8px 0;color:var(--brand-dark);font-size:var(--t-body);font-weight:700;line-height:1.5;}
.services-calm-page .services-calm-primary>a:hover h3,
.service-format-card h3 a:hover,.service-card-link:hover{text-decoration:underline;text-underline-offset:4px;}
.services-calm-page .services-calm-format-list{gap:24px;border:0;align-items:stretch;}
.service-format-card{display:flex;min-width:0;flex-direction:column;border:1px solid var(--svc-line);border-radius:14px;overflow:hidden;background:#fff;}
.service-format-card.is-priority{border:2px solid var(--brand-dark);}
.service-format-card>img{width:100%;height:220px;object-fit:cover;}
.service-format-card .service-card-copy ul{margin:0 0 8px;padding-left:20px;color:var(--svc-ink);}
.service-format-card .service-card-copy li{padding-left:2px;font-size:var(--t-body);line-height:1.6;}
.service-format-card .service-card-copy li+li{margin-top:10px;}
.services-calm-page .services-calm-condition-list h3{font-size:var(--t-lead);}
.service-calm-copy,.service-calm-copy p,.service-calm-copy li{font-size:var(--t-body);line-height:1.7;}
.service-system :is(.service-calm-eyebrow,.service-calm-section-head>span,.service-calm-path header>span){font-size:var(--t-small);}
.service-system a:focus-visible,.service-system button:focus-visible,.city-field input:focus-visible{outline:3px solid #bf653c;outline-offset:4px;}
.footer-service-group+.footer-service-group{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);}
.footer-service-group h4{margin:0 0 10px;font-size:var(--t-small);color:#fff;line-height:1.4;}
.footer-service-group li+li{margin-top:7px;}
.city-field{min-width:0;}
.city-field input{width:100%;min-width:0;font-size:var(--t-body);}
.city-field-hint{display:block;margin-top:6px;font-size:var(--t-micro);font-weight:400;line-height:1.45;color:#536363;}
.scenario-card:first-child{border-color:var(--brand-dark);}
.scenario-request{border:0;padding:0;background:transparent;color:var(--brand-dark);font:inherit;font-weight:700;cursor:pointer;text-align:left;}
.scenario-request:hover{text-decoration:underline;text-underline-offset:4px;}
.scenario-request:focus-visible,.lead-modal :is(button,a,input,select,textarea):focus-visible{outline:3px solid #bf653c;outline-offset:3px;}
@media (max-width:1024px){
.services-calm-page .services-calm-format-list{grid-template-columns:1fr;}
.service-format-card{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);}
.service-format-card>img{height:100%;min-height:270px;}
}
@media (max-width:760px){
.services-calm-page .services-calm-primary{grid-template-columns:1fr;gap:24px;}
.services-calm-page .service-calm-section-head p{grid-column:1;grid-row:auto;}
.services-calm-page .services-calm-primary img{height:auto;aspect-ratio:16/9;}
.service-format-card{display:flex;}
.service-format-card>img{height:auto;min-height:0;aspect-ratio:16/9;}
.services-calm-page .service-card-copy{padding:22px;gap:14px;}
.services-calm-page .services-calm-hero-media img{height:auto;aspect-ratio:16/9;}
.service-calm-path-list h3{font-size:var(--t-lead);}
.service-calm-copy,.service-calm-copy p,.service-calm-copy li{font-size:var(--t-body);}
.site-footer{padding-bottom:90px;}
.service-calm-process-body>ol>li{position:relative;min-height:0;padding:24px 0 24px 52px;}
.service-calm-process-body>ol>li::before{position:absolute;top:24px;left:0;width:36px;margin:0;font-size:var(--t-lead);line-height:1.5;}
.service-calm-process-body>ol>li>strong:first-child{margin:0 0 8px;font-size:var(--t-lead);line-height:1.5;}
}
/* ============================================================================
P0 — правки по итогам созвона 07.09.2026 и UX-аудита.
Блок намеренно вынесен в конец файла: правки видны одним куском и
рецензируются отдельно от исторического кода.
============================================================================ */
/* --- 1. Финальный призыв больше не сливается с подвалом ---------------------
Было: секция залита #0f5b4f, сразу за ней подвал #143e38 — две тёмные
полосы вплотную, между ними торчала линия. Стало: светлая секция,
внутри тёмная карточка, между ней и подвалом остаётся воздух. */
/* Страховка на будущее: если кто-то снова поставит две тёмные полосы подряд,
он увидит это в браузере сразу{ outline:4px dashed #ff4d4d; outline-offset:-4px; }
/* --- 2. Подвал: группы услуг разделены линией ------------------------------
Клиент: «в подвале услуги — и деменция, и форматы, и типы в одной куче,
разделить чертой, чтобы было по смыслу». */
.footer-service-group + .footer-service-group{
margin-top:20px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.14);
}
.footer-service-group h4{
margin:0 0 10px;
color:rgba(255,255,255,.62);
font-size:var(--t-micro);
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
}
.footer-service-group ul{ display:grid; gap:8px; }
/* --- 3. Область нажатия и читаемость в шапке --------------------------------
Правило было написано без медиазапроса и перебивало базовое
.header-phone{display:none} — на десктопе телефон показывался дважды:
в верхней полосе рядом с мессенджерами и в строке шапки у кнопки заявки.
Телефон в строке шапки нужен только там, где верхняя полоса скрыта. */
@media (max-width:760px){
.header-phone{
display:inline-flex; align-items:center;
min-height:44px; padding:0 10px; border-radius:999px;
font-size:var(--t-small); font-weight:700; white-space:nowrap;
}
.header-phone:hover{ background:rgba(255,255,255,.10); }
}
/* --- 4. Переключатель языка остаётся в подвале ------------------------------
Перенос в шапку был ошибкой: лишний элемент уплотнил ряд, меню съехало
влево и логотип (он рисуется с transform:scale(2), то есть вдвое шире
своего бокса) наехал на первый пункт. В подвале переключатель работал. */
/* --- 5. Якорные переходы не уезжают под липкую шапку ------------------------ */
section[id],div[id],article[id]{ scroll-margin-top:132px; }
@media (max-width:760px){ section[id],div[id],article[id]{ scroll-margin-top:76px; } }
/* --- 6. Мобильная шапка: телефон и язык остаются, вторая кнопка уходит ------
В шапке было две кнопки в одну и ту же форму, а на телефоне ещё и
закреплённая нижняя панель — три входа в одно действие. */
@media (max-width:760px){
.header-row{ gap:8px; }
.header-actions .cta{ display:none; }
.header-phone{ padding:0 8px; font-size:var(--t-micro); }
}
@media (max-width:480px){
.header-phone{ width:44px; padding:0; justify-content:center; font-size:0; }
.header-phone::before{ content:"\260E"; font-size:20px; }
}
/* --- 7. Кнопки и поля наследуют шрифт страницы -----------------------------
Без этого браузер подставляет системные 13,3 px, и подписи на кнопках
оказываются мельче любого текста рядом. */
button,input,select,textarea{ font-family:inherit; }
button,.cta,.nav-cta,.btn-accent{ font-size:var(--t-small); }
/* --- 8. Базовый размер текста --------------------------------------------
Явно фиксируем 16 px — ровно то, что было на сайте. Правило нужно, чтобы
размер брался из шкалы, а не из настроек браузера. */
body{ font-size:var(--t-body); }
/* --- 9. Заголовки карточек стали вместо ----------------------
Было: на страницах услуг подряд шли 8-14 и ни одного — названия
карточек были свёрстаны . Экранный диктор не мог перемещаться по
карточкам, поисковая система видела плоскую ленту. Правила ниже приводят
новые h3 к прежнему виду, чтобы внешне ничего не изменилось. */
.services-calm-condition-list h3,
.service-calm-path-list h3,
.service-city-card h3,
.blog-related-link h3,
.city-index-featured-photo h3,
.trust-grid article h3{ margin:0; font-weight:800; }
.city-index-featured-photo h3{ font-size:var(--t-lead); }
.trust-grid article h3{ font-size:var(--t-lead); margin-bottom:8px; }
/* --- 10. Пропорции изображений ---------------------------------------------
У всех img проставлены width/height, чтобы браузер резервировал место
до загрузки и вёрстка не прыгала. Там, где src подставляется из контента
и реальные пропорции могут отличаться, размер держит CSS. */
.service-city-card img,
.city-index-featured-photo img{ width:100%; height:auto; aspect-ratio:540/312; object-fit:cover; }
.blog-card img,.service-catalog-photo img{ width:100%; height:auto; aspect-ratio:570/410; object-fit:cover; }
.logo img,.logo-foot img{ width:auto; }
/* --- 11. Таблица опорных цен на странице услуги ----------------------------
Раньше на страницах по состоянию (паллиатив, онко, деменция, инсульт)
раздел «Сколько стоит» не выводил ни одной цифры — теперь там четыре
опорные суммы. Таблица трёхколоночная, на телефоне разворачивается
в карточки без повторяющихся подписей. */
.service-price-preview{ margin-top:18px; background:#fff; border:1px solid var(--svc-line); border-radius:14px; overflow:hidden; }
.service-price-preview caption{ padding:0; margin-bottom:12px; color:var(--svc-muted); font-size:var(--t-small); font-weight:600; }
.service-price-preview th,.service-price-preview td{ padding:12px 16px; }
.service-price-preview thead th{ background:var(--brand-soft); color:var(--brand-dark); font-size:var(--t-small); font-weight:700; text-align:right; white-space:nowrap; }
.service-price-preview thead th:first-child{ text-align:left; }
.service-price-preview tbody tr + tr th,.service-price-preview tbody tr + tr td{ border-top:1px solid var(--svc-line); }
.service-price-preview tbody th{ font-size:var(--t-small); }
.service-price-preview td{ font-weight:700; }
.service-price-preview td:last-child{ color:var(--brand-dark); }
@media (max-width:760px){
.service-price-preview,.service-price-preview tbody,.service-price-preview tr,
.service-price-preview th,.service-price-preview td{ display:block; width:100%; }
.service-price-preview thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.service-price-preview{ border:0; background:transparent; }
.service-price-preview tbody tr{ margin-bottom:12px; border:1px solid var(--svc-line); border-radius:14px; background:#fff; overflow:hidden; }
.service-price-preview tbody tr + tr th,.service-price-preview tbody tr + tr td{ border-top:0; }
.service-price-preview tbody th{ background:var(--brand-soft); color:var(--brand-dark); font-weight:700; }
.service-price-preview tbody td{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-top:1px solid var(--svc-line); text-align:right; }
.service-price-preview tbody td::before{ content:attr(data-label); color:var(--svc-muted); font-size:var(--t-small); font-weight:400; }
}
/* --- 12. Цена в карточках каталога -----------------------------------------
Каталог услуг был витриной без ценников: символ € не встречался на
странице ни разу. Теперь у каждой карточки есть опорная цена. */
.service-card-price{
display:block; margin-top:auto; padding-top:12px;
border-top:1px solid var(--svc-line);
color:var(--brand-dark); font-size:var(--t-small); font-weight:800;
}
.service-card-copy .service-card-price + .service-card-link{ margin-top:8px; }
/* Хлебные крошки нужны и на телефоне: без них человек не понимает,
в каком разделе находится. */
@media (max-width:760px){
.services-calm-hero .breadcrumbs{ display:flex; flex-wrap:wrap; gap:6px; }
}
/* --- 13. Фон секции задаётся модификатором, а не порядковым номером --------
Было: .services-calm-section:nth-of-type(3){background:…} — добавление или
удаление секции молча уводило подсветку на соседнюю. */
.services-calm-section.is-soft,
.service-calm-process.is-soft{ background:var(--svc-soft); }
/* ============================================================================
14. Блоки коммерческого лендинга услуги.
Клиент на созвоне: «стенгазета», «информационный сайт, а не продающий».
Причина была не в оформлении, а в том, что семь разных по смыслу секций
подряд подавались одной и той же формой «заголовок слева, абзацы справа».
Ниже — формы под каждый смысл. Палитра и шрифт не меняются.
============================================================================ */
/* --- Что входит в уход: список в колонки + отдельная карточка «чего не делает» */
.service-calm-checklist{ padding:58px 0; background:#fff; }
.service-checklist-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:42px; align-items:start; }
.service-checklist-main>ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 32px; margin:0; padding:0; list-style:none; }
.service-checklist-main>ul>li{ position:relative; padding-left:26px; font-size:var(--t-body); line-height:1.55; }
.service-checklist-main>ul>li::before{
content:""; position:absolute; left:0; top:.55em; width:12px; height:7px;
border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
transform:rotate(-45deg);
}
.service-checklist-main>ul>li>strong{ color:var(--svc-ink); }
.service-checklist-main>p{ margin-bottom:22px; color:var(--svc-muted); }
.service-checklist-main>p:last-child{ margin:22px 0 0; }
.service-checklist-aside{
padding:26px; border:1px solid var(--accent); border-radius:16px;
background:var(--accent-soft);
}
.service-checklist-aside h3{ margin:0 0 14px; font-size:var(--t-h3); color:var(--accent-dark); }
.service-checklist-aside ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.service-checklist-aside li{ position:relative; padding-left:24px; font-size:var(--t-small); line-height:1.5; }
.service-checklist-aside li::before{
content:"×"; position:absolute; left:2px; top:-1px;
color:var(--accent-dark); font-size:var(--t-lead); font-weight:800; line-height:1.4;
}
/* --- Обычный день ухода: таймлайн вместо абзаца с перечислением через запятую */
.service-calm-day{ padding:58px 0; background:var(--svc-bg); }
.service-day-timeline{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 42px; margin:0; padding:0; list-style:none; }
.service-day-timeline>li{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--svc-line); }
.service-day-timeline time{ color:var(--brand-dark); font-size:var(--t-small); font-weight:800; }
.service-day-timeline strong{ display:block; font-size:var(--t-body); }
.service-day-timeline span span{ display:block; margin-top:3px; color:var(--svc-muted); font-size:var(--t-small); line-height:1.5; }
/* --- Когда нужна сиделка: пункты самоидентификации в две колонки */
.service-calm-signs{ padding:58px 0; background:#fff; }
.service-signs-body>ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px; margin:0; padding:0; list-style:none; }
.service-signs-body>ul>li{ position:relative; padding:14px 0 14px 30px; border-top:1px solid var(--svc-line); font-size:var(--t-body); line-height:1.5; }
.service-signs-body>ul>li::before{
content:""; position:absolute; left:0; top:1.35em; width:10px; height:10px;
border-radius:50%; background:var(--brand-soft); box-shadow:inset 0 0 0 2px var(--brand);
}
.service-signs-body>p{ color:var(--svc-muted); }
.service-signs-body>p:first-child{ margin-bottom:20px; }
/* --- Что подготовить к первому дню: спокойная карточка-памятка */
.service-calm-prepare{ padding:0 0 58px; background:#fff; }
.service-prepare-card{ padding:30px 34px; border:1px solid var(--svc-line); border-left:4px solid var(--brand); border-radius:16px; background:var(--svc-bg); }
.service-prepare-card h2{ margin:0 0 12px; font-size:var(--t-h3); }
.service-prepare-card p{ color:var(--svc-muted); }
@media (max-width:1024px){
.service-checklist-grid{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:760px){
.service-calm-checklist,.service-calm-day,.service-calm-signs{ padding:40px 0; }
.service-checklist-main>ul,.service-signs-body>ul,.service-day-timeline{ grid-template-columns:1fr; }
.service-day-timeline>li{ grid-template-columns:64px minmax(0,1fr); gap:12px; }
.service-prepare-card{ padding:22px; }
}
/* --- 15. Логотип резервирует ту ширину, которую реально занимает ------------
Мина, на которую я наступил: `.logo img{height:80px; transform:scale(2)}` —
изображение рисуется 240×160, а раскладка видит бокс 120×80. Пока справа
в шапке было мало элементов, зазора хватало. Стоило телефону стать
крупнее и получить область нажатия 44 px, меню съехало влево и ушло
под логотип. Ниже бокс приводится к тому, что видит глаз; внешний вид
логотипа не меняется. */
.logo{ flex:0 0 auto; width:252px; }
/* ============================================================================
16. Разбор трёх замечаний по вёрстке от 07.09.2026
============================================================================ */
/* --- 16.1 Цена прибита к низу карточки -------------------------------------
Было: `margin-top:auto` не срабатывал, потому что старое правило
`.services-calm-format-list span{margin:9px 0}` специфичнее, чем
`.service-card-price`. Из-за этого цена и ссылка висели в середине,
а под ними в карточках с коротким текстом оставалась пустота. */
.services-calm-primary .service-card-price,
.services-calm-format-list .service-card-price,
.service-formats-grid .service-card-price,
.service-card-copy .service-card-price{
/* flex-direction обязателен: `.services-calm-primary span` из старого
оформления ставит колонку, и «от / 23 € / в день» рассыпается в три строки */
display:flex; flex-direction:row; align-items:baseline; gap:6px; flex-wrap:wrap;
margin:auto 0 0; padding:14px 0 0;
border-top:1px solid var(--svc-line);
color:var(--svc-muted); font-size:var(--t-small); font-weight:600;
}
.service-card-price .price-from{ color:var(--svc-muted); }
.service-card-price .price-amount{ color:var(--brand-dark); font-size:var(--t-lead); font-weight:800; letter-spacing:-.01em; }
.service-card-price .price-unit{ color:var(--svc-muted); }
.service-card-price .price-note-inline{ color:var(--brand-dark); font-weight:700; }
/* ссылка идёт сразу под ценой и вместе с ней держится низа карточки */
.services-calm-primary .service-card-price + .service-card-link,
.services-calm-format-list .service-card-price + .service-card-link,
.service-formats-grid .service-card-price + .service-card-link,
.service-card-copy .service-card-price + .service-card-link{ margin-top:12px; }
/* --- 16.2 Карточки форматов на странице услуги ------------------------------
Было: блок переиспользовал класс `.services-calm-format-list`, а его
современная раскладка (отступ 24 px, без разделительных линий) объявлена
только внутри страницы каталога. На странице услуги отступ оказался
нулевым, карточки слиплись и их рамки наложились друг на друга. */
.service-formats-grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px; align-items:stretch; border:0;
}
.service-formats-grid > .service-format-card{
display:flex; flex-direction:column;
border:1px solid var(--svc-line); border-radius:14px;
background:#fff; overflow:hidden;
transition:box-shadow .18s, transform .18s;
}
.service-formats-grid > .service-format-card:hover{ box-shadow:0 12px 32px rgba(24,39,40,.10); transform:translateY(-2px); }
.service-formats-grid .service-card-copy{ display:flex; flex:1; flex-direction:column; gap:10px; padding:24px; }
.service-formats-grid .service-card-copy h3{ margin:0; font-size:var(--t-h3); line-height:1.3; }
.service-formats-grid .service-card-copy p{ margin:0; color:var(--svc-muted); font-size:var(--t-small); line-height:1.6; }
@media (max-width:1024px){ .service-formats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .service-formats-grid{ grid-template-columns:1fr; } }
/* --- 16.3 Числа в таблице цен выровнены с заголовками ------------------------
Было: заголовки колонок выровнены по правому краю, а значения по левому,
потому что `.service-calm-copy td{text-align:left}` из оформления прозы
перебивало правило таблицы. Числа «висели» слева от своих заголовков. */
.service-calm-copy .service-price-preview td,
.service-price-preview td{ text-align:right; white-space:nowrap; }
.service-calm-copy .service-price-preview tbody th,
.service-price-preview tbody th{ text-align:left; }
.service-price-preview{ table-layout:auto; }
.service-price-preview thead th:first-child{ width:50%; }
.service-price-preview td:last-child{ color:var(--brand-dark); }
/* ============================================================================
17. Город-страницы. Шаблон терял вступление, не выводил FAQ и подписывал
каждую из семи секций номером «01…07» и словами «УСЛУГА В ГОРОДЕ».
Формы блоков — те же, что на страницах услуг, чтобы сайт читался как одно
целое. 578 адресов, RU и BG.
============================================================================ */
/* --- Вступление с телефоном: раньше выбрасывалось шаблоном ------------------ */
.city-intro-strip{ padding:26px 0 0; background:#fff; }
.city-intro-strip .wrap > p{
margin:0; padding:16px 20px;
border-left:4px solid var(--accent); border-radius:0 12px 12px 0;
background:var(--accent-soft);
font-size:var(--t-lead); font-weight:600; color:var(--ink);
}
.city-intro-strip a{ color:var(--accent-dark); font-weight:700; }
/* --- Чеклист без боковой карточки занимает всю ширину ---------------------- */
.service-checklist-grid.is-single{ grid-template-columns:1fr; }
/* --- Таблица цен из markdown приводится к виду таблицы на страницах услуг --- */
.city-price-body table{
width:100%; margin-top:8px; border-collapse:collapse;
background:#fff; border:1px solid var(--svc-line); border-radius:14px; overflow:hidden;
}
.city-price-body th,.city-price-body td{ padding:12px 16px; text-align:left; }
.city-price-body thead th{ background:var(--brand-soft); color:var(--brand-dark); font-size:var(--t-small); font-weight:700; }
.city-price-body thead th:last-child,.city-price-body td:last-child{ text-align:right; white-space:nowrap; }
.city-price-body tbody tr + tr th,.city-price-body tbody tr + tr td{ border-top:1px solid var(--svc-line); }
.city-price-body td:last-child{ color:var(--brand-dark); font-weight:700; }
.city-price-body > p:last-child{ margin-top:14px; color:var(--svc-muted); font-size:var(--t-small); }
/* --- «Как мы работаем» — шаги, а не маркированный список ------------------- */
.city-steps-body > ul{
counter-reset:s; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:24px; margin:0; padding:0; list-style:none;
}
.city-steps-body > ul > li{
counter-increment:s; padding-top:20px;
border-top:3px solid var(--brand-soft);
font-size:var(--t-small); line-height:1.6; color:var(--svc-muted);
}
.city-steps-body > ul > li::before{
content:"0" counter(s); display:block; margin-bottom:8px;
color:var(--brand); font-size:var(--t-small); font-weight:800;
}
.city-steps-body > ul > li > strong:first-child{ display:block; color:var(--ink); font-size:var(--t-body); }
/* --- География: текст плюс переходы, которых раньше не было ---------------- */
.city-detail-region{ padding:58px 0; background:var(--svc-bg); }
.city-region-text{ max-width:70ch; }
.city-region-links{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; margin-top:28px; align-items:start; }
.city-cross-card{
display:flex; flex-direction:column; gap:8px; padding:22px;
border:1px solid var(--svc-line); border-radius:14px; background:#fff;
transition:box-shadow .18s, transform .18s;
}
.city-cross-card:hover{ box-shadow:0 12px 32px rgba(24,39,40,.10); transform:translateY(-2px); }
.city-cross-card h3{ margin:0; font-size:var(--t-h3); line-height:1.3; }
.kicker-line{ display:block; color:var(--brand-dark); font-size:var(--t-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.city-nearby{ padding:22px; border:1px solid var(--svc-line); border-radius:14px; background:#fff; }
.city-nearby ul{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.city-nearby li a{
display:inline-flex; align-items:center; min-height:38px; padding:0 14px;
border:1px solid var(--svc-line); border-radius:999px;
font-size:var(--t-small); font-weight:600; color:var(--ink);
}
.city-nearby li a:hover{ border-color:var(--brand); color:var(--brand-dark); }
.city-all-link{ display:inline-block; margin-top:14px; color:var(--brand-dark); font-size:var(--t-small); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
/* --- Примечание в конце: раньше приклеивалось к блоку вопросов ------------- */
.city-detail-note{ padding:0 0 46px; background:#fff; }
.city-detail-note .wrap > p{ margin:0 0 8px; color:var(--svc-muted); font-size:var(--t-small); line-height:1.6; }
.city-detail-note a{ color:var(--brand-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
/* --- Обычная текстовая секция города -------------------------------------- */
.city-story{ padding:46px 0; background:#fff; }
.city-story .service-calm-copy{ max-width:70ch; }
@media (max-width:1024px){
.city-steps-body > ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.city-region-links{ grid-template-columns:1fr; }
}
@media (max-width:760px){
.city-detail-region{ padding:40px 0; }
.city-steps-body > ul{ grid-template-columns:1fr; }
.city-price-body table,.city-price-body tbody,.city-price-body tr,.city-price-body th,.city-price-body td{ display:block; width:100%; }
.city-price-body thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.city-price-body table{ border:0; background:transparent; }
.city-price-body tbody tr{ margin-bottom:10px; border:1px solid var(--svc-line); border-radius:12px; background:#fff; overflow:hidden; }
.city-price-body tbody tr + tr th,.city-price-body tbody tr + tr td{ border-top:0; }
.city-price-body tbody td{ border-top:1px solid var(--svc-line); text-align:right; }
}
/* =========================================================================
18. Раунд «конкуренты»: блок заявки, единые шаги, ритм секций, hero города
------------------------------------------------------------------------
Пишем в конец файла осознанно: .service-calm-copy ul/ol (5286) и
.service-calm-process-body>ol (5324) имеют ту же специфичность (0,1,1),
и порядок в файле — единственное, что решает спор.
========================================================================= */
/* --- 18.1 Единый блок шагов: иконка + номер, работает и на ul, и на ol --- */
ol.dy-steps{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
margin:26px 0 0;
padding:0;
list-style:none;
counter-reset:none;
}
ol.dy-steps > li{
display:flex;
flex-direction:column;
align-items:flex-start;
min-height:0;
margin:0;
padding:22px 20px 20px;
border:1px solid var(--svc-line);
border-radius:14px;
background:#fff;
}
ol.dy-steps > li::before,
ol.dy-steps > li::marker{ content:none; }
.dy-step-icon{
display:grid;
place-items:center;
width:46px;
height:46px;
margin-bottom:14px;
border-radius:50%;
background:var(--brand-soft);
}
.dy-step-icon img{ width:26px; height:26px; }
.dy-step-num{
display:block;
margin-bottom:6px;
color:var(--brand);
font-size:var(--t-micro);
font-weight:800;
letter-spacing:.06em;
}
.dy-step-title{
display:block;
margin-bottom:7px;
color:var(--ink);
font-size:var(--t-body);
font-weight:700;
line-height:1.35;
}
ol.dy-steps > li > .dy-step-text{
margin:0;
color:var(--svc-muted);
font-size:var(--t-small);
line-height:1.6;
}
/* --- 18.2 Блок заявки: лицо, время ответа, звонок и мессенджеры рядом --- */
.service-system .lead-block,
.lead-block{ padding:62px 0; background:#f7f4ef; }
.lead-block-inner{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
gap:46px;
align-items:center;
padding:38px 42px;
border-radius:20px;
background:linear-gradient(120deg,#0f5b4f,#146b5c);
color:#fff;
box-shadow:0 18px 44px rgba(24,39,40,.16);
}
.lead-block-eyebrow{
display:block;
margin-bottom:10px;
color:#a9ded2;
font-size:var(--t-micro);
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
}
.lead-block-copy h2{
margin:0;
color:#fff;
font-size:var(--t-h2);
line-height:1.18;
}
.lead-block-copy > p{
margin:12px 0 0;
color:rgba(255,255,255,.84);
font-size:var(--t-body);
line-height:1.62;
}
.lead-block-reply{
display:flex;
align-items:center;
gap:9px;
margin:18px 0 0 !important;
color:#fff !important;
font-weight:700;
}
.lead-block-reply::before{
content:"";
width:9px;
height:9px;
border-radius:50%;
background:#7fe0c2;
box-shadow:0 0 0 4px rgba(127,224,194,.22);
}
.lead-block-hours{
margin:6px 0 0 !important;
color:rgba(255,255,255,.66) !important;
font-size:var(--t-small);
}
.lead-block-action{
display:grid;
gap:12px;
justify-items:stretch;
}
.lead-block-person{
display:flex;
align-items:center;
gap:12px;
margin:0 0 4px;
}
.lead-block-person img{
width:64px;
height:64px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,.5);
}
.lead-block-person figcaption{
color:rgba(255,255,255,.78);
font-size:var(--t-small);
font-weight:700;
}
.lead-block-cta{ width:100%; min-height:52px; }
.lead-block-phone{
display:flex;
align-items:center;
justify-content:center;
min-height:50px;
border:1px solid rgba(255,255,255,.3);
border-radius:10px;
color:#fff;
font-weight:800;
white-space:nowrap;
}
.lead-block-messengers{ margin-top:4px; }
.lead-block-messengers-label{
display:block;
margin-bottom:8px;
color:rgba(255,255,255,.62);
font-size:var(--t-micro);
}
.lead-block-messengers-row{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.lead-block .lead-msg{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:44px;
padding:0 6px;
border-radius:10px;
background:rgba(255,255,255,.12);
color:#fff;
font-size:var(--t-micro);
font-weight:700;
transition:background .18s;
}
.lead-block .lead-msg:hover{ background:rgba(255,255,255,.2); }
.lead-block .lead-msg img{ width:18px; height:18px; flex:0 0 auto; }
/* --- 18.3 .city-story больше не наследует grid от .service-calm-reading-row --- */
.service-system .city-story{ padding:46px 0; background:#fff; }
.city-story .service-calm-copy{ max-width:70ch; }
/* --- 18.4 Ритм секций: селектор .service-system .класс (0,2,0) перебивает
.service-system section (0,1,1), из-за которого все отступы были равны --- */
.service-system .service-calm-hero{ padding:48px 0 60px; }
.service-system .service-calm-checklist{ padding:64px 0 58px; }
.service-system .service-calm-day{ padding:58px 0; }
.service-system .service-calm-signs{ padding:58px 0; }
.service-system .service-calm-prices{ padding:66px 0; }
.service-system .service-calm-process{ padding:66px 0; }
.service-system .service-calm-prepare{ padding:52px 0 64px; }
.service-system .service-calm-faq{ padding:64px 0 70px; }
.service-system .city-intro-strip{ padding:30px 0 8px; }
.service-system .city-detail-region{ padding:62px 0; }
.service-system .city-detail-note{ padding:0 0 52px; }
/* Три белые секции подряд на 554 город-страницах разводим фоном:
«Когда нужна помощь» уходит на мятный, полоса перестаёт быть сплошной. */
.city-detail-page .service-calm-signs{ background:var(--svc-soft); }
.city-detail-page .service-calm-checklist{ padding-bottom:66px; }
/* --- 18.5 Hero города: кадр ландшафтный, как и сами фотографии ---------- */
.city-detail-page .service-detail-hero-grid{
grid-template-columns:minmax(0,1fr) minmax(420px,1fr);
gap:48px;
}
.city-detail-page .service-detail-visual{
min-height:0;
aspect-ratio:16/10;
border-radius:14px;
}
.city-detail-page .service-detail-visual > img{ object-position:center 42%; }
@media (max-width:1024px){
ol.dy-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.lead-block-inner{ grid-template-columns:1fr; gap:28px; padding:28px 24px; }
.city-detail-page .service-detail-hero-grid{ grid-template-columns:1fr; }
.city-detail-page .service-detail-visual{ aspect-ratio:16/9; }
}
@media (max-width:760px){
ol.dy-steps{ grid-template-columns:1fr; gap:12px; }
.service-system .lead-block,
.lead-block{ padding:40px 0; }
.lead-block-messengers-row{ grid-template-columns:1fr; }
.lead-block .lead-msg{ justify-content:flex-start; padding:0 16px; }
}
/* --- 18.6 Hero города: три блока сеткой, чтобы на мобильном фото шло сразу
за лидом, а не после трёх фактов — так панорама уезжала на пол-экрана вниз */
.city-detail-page .service-detail-hero-grid{
grid-template-areas:"copy visual" "facts visual";
grid-template-rows:auto 1fr;
align-items:start;
gap:26px 48px;
}
.city-detail-page .service-detail-hero-copy{ grid-area:copy; }
.city-detail-page .service-detail-visual{ grid-area:visual; align-self:center; }
.city-detail-page .service-calm-facts{ grid-area:facts; margin-top:0; }
@media (max-width:1024px){
.city-detail-page .service-detail-hero-grid{
grid-template-columns:1fr;
grid-template-areas:"copy" "visual" "facts";
grid-template-rows:auto;
gap:22px;
}
}
/* --- 18.7 Уход после выписки и реальные соседние города ------------------
Единственные блоки, которые на каждой из 576 город-страниц говорят
о своём городе: названия больниц и километры до соседей. */
.service-system .city-hospitals{ padding:56px 0; background:var(--svc-soft); }
.city-hospitals-body{ max-width:72ch; }
.city-hospitals-body > p{ margin:0; }
ul.city-hospitals-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:12px;
margin:22px 0 0;
padding:0;
list-style:none;
max-width:none;
}
.city-hospitals-body ul.city-hospitals-list > li{
margin:0;
padding:14px 16px 14px 44px;
position:relative;
border:1px solid var(--svc-line);
border-radius:12px;
background:#fff;
font-size:var(--t-small);
line-height:1.5;
}
.city-hospitals-body ul.city-hospitals-list > li::before{
content:"";
position:absolute;
left:16px;
top:16px;
width:16px;
height:16px;
border-radius:4px;
background:var(--brand);
-webkit-mask:no-repeat center/16px url("/img/icons/care-monitoring.png");
mask:no-repeat center/16px url("/img/icons/care-monitoring.png");
}
.city-nearby-km{
margin-left:8px;
color:var(--svc-muted);
font-size:var(--t-micro);
font-weight:600;
white-space:nowrap;
}
.city-nearby a{ display:inline-flex; align-items:baseline; }
@media (max-width:760px){
.service-system .city-hospitals{ padding:40px 0; }
ul.city-hospitals-list{ grid-template-columns:1fr; }
}
/* --- 18.8 Таблицы цен: колонок стало больше ------------------------------
У .pricing-table-wrap стоял overflow:hidden — при пяти периодах вместо
четырёх правая колонка обрезалась бы без всякого признака. */
.pricing-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pricing-table{ min-width:640px; }
.pricing-na{ color:var(--svc-muted); font-weight:700; }
@media (max-width:760px){
/* На узком экране таблица уже перестроена в карточки — ширина не нужна. */
.pricing-table{ min-width:0; }
}
/* --- 18.9 Условия рядом с доплатой ---------------------------------------
В таблице клиента у каждой доплаты есть оговорка — расходники за счёт
заказчика, замена пакета, проезд. Сайт печатал голую цифру, и разговор
об условиях всплывал уже на заказе. */
.pricing-extra-note{
display:block;
margin-top:2px;
color:var(--muted);
font-size:var(--t-micro);
font-weight:400;
line-height:1.45;
}
/* --- 18.10 Поля формы не растягиваются под соседа --------------------------
У label в форме заявки display:grid, и в сетке он тянется на всю высоту
строки. Рядом с полем «Город» есть подсказка в две строки — соседний
label вытягивался следом, а его содержимое распределялось по высоте:
select «Вид помощи» уезжал на 27 px вниз и вставал не в линию с полем
города. Прижимаем содержимое к верху. */
.lead-form label,
.quick-fields label,
.contact-form label,
.modal-form label{ align-content:start; }
/* ==========================================================================
18.11 Блок отзывов
Данные — data/reviews.json. Карточки в три колонки, на планшете две,
на телефоне одна. Высота выравнивается гридом, текст прижат к верху,
подпись — к низу карточки.
========================================================================== */
.reviews-block{ padding:64px 0; background:#f4f7f5; }
.reviews-head{ max-width:760px; margin:0 0 28px; }
.reviews-eyebrow{ display:inline-block; margin-bottom:10px; font-size:var(--t-micro); font-weight:700;
letter-spacing:.08em; text-transform:uppercase; color:#19856f; }
.reviews-head h2{ margin:0 0 10px; }
.reviews-source{ margin:0; color:#536363; font-size:var(--t-small); line-height:1.5; }
.reviews-source a{ color:#19856f; text-decoration:underline; text-underline-offset:3px; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0; padding:0; list-style:none; }
.review-card{ display:grid; grid-template-rows:auto 1fr auto; gap:12px; padding:22px 22px 20px;
background:#fff; border:1px solid #e2eae6; border-radius:16px; }
.review-stars{ margin:0; font-size:15px; line-height:1; color:#e0a12a; letter-spacing:2px; }
.review-text{ margin:0; border:0; padding:0; }
.review-text p{ margin:0; font-size:var(--t-small); line-height:1.6; color:#243330; }
.review-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
padding-top:12px; border-top:1px solid #eef3f0; }
.review-author{ font-weight:700; font-size:var(--t-small); }
.review-date{ color:#7b8a86; font-size:var(--t-micro); }
@media (max-width:1000px){
.reviews-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
.reviews-block{ padding:44px 0; }
.reviews-grid{ grid-template-columns:1fr; gap:14px; }
.review-card{ padding:18px; }
}
/* ==========================================================================
18.12 Поля формы как система
Раньше каждое поле было отдельным label со своей вёрсткой, а поле города
стало div-ом (в label нельзя положить список подсказок). Общий класс
.form-field держит их в одной сетке независимо от тега.
========================================================================== */
.quick-fields .form-field,
.lead-form .form-field,
.contact-form .form-field,
.modal-form .form-field{
display:grid;
gap:7px;
align-content:start;
min-width:0;
color:#314242;
font-size:var(--t-small);
font-weight:800;
}
.modal-form .form-field{ gap:6px; font-weight:700; }
.city-field>label{ display:block; font:inherit; color:inherit; }
.city-field-shell{ position:relative; min-width:0; }
/* Селект «Вид помощи»: своя стрелка вместо системной, поле в тех же
границах и с тем же радиусом, что и текстовые поля. Список опций рисует
операционная система — его оформление браузеру не отдаётся. */
.select-shell{ position:relative; display:block; min-width:0; }
.select-shell::after{
content:"";
position:absolute;
top:50%;
right:16px;
width:9px;
height:9px;
margin-top:-7px;
border-right:2px solid #4a5b58;
border-bottom:2px solid #4a5b58;
transform:rotate(45deg);
pointer-events:none;
}
.form-field .select-shell select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
padding-right:40px;
background-image:none;
cursor:pointer;
}
.form-field .select-shell select::-ms-expand{ display:none; }
.select-shell:has(select:focus)::after{ border-color:#19856f; }
/* Подсказки городов. Появляются под полем: сначала пять крупнейших городов,
при вводе список сужается. Ширину берём от поля, а не от контента, иначе
длинные названия растягивают форму. */
.city-suggest{
position:absolute;
z-index:40;
top:calc(100% + 6px);
left:0;
right:0;
margin:0;
padding:6px;
list-style:none;
max-height:262px;
overflow-y:auto;
background:#fff;
border:1px solid rgba(24,39,40,.14);
border-radius:12px;
box-shadow:0 18px 38px rgba(10,38,34,.18);
}
.city-suggest[hidden]{ display:none; }
.city-suggest li{ margin:0; }
.city-suggest-note{
padding:6px 10px 8px;
color:#7b8a86;
font-size:var(--t-micro);
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
.city-suggest-option{
padding:9px 10px;
border-radius:8px;
color:#162526;
font-size:var(--t-small);
font-weight:600;
cursor:pointer;
}
.city-suggest-option:hover,
.city-suggest-option[aria-selected="true"]{ background:#eaf3f0; }
.city-suggest-option mark{ background:none; color:#19856f; font-weight:800; }
/* ==========================================================================
18.13 Карточка города: анкор вместо «Смотреть услугу»
Подпись стала осмысленной ссылкой («Сиделка в г. София», «Болногледач във
Варна») и в строку рядом с названием больше не помещается — ставим её под
названием. Заодно усиливаем затемнение: на светлых панорамах белый текст
на прежнем градиенте читался с трудом.
========================================================================== */
.service-city-card::after{
inset:20% 0 0;
background:linear-gradient(180deg,rgba(12,38,35,0),rgba(12,38,35,.5) 45%,rgba(12,38,35,.9));
}
.service-city-card>span{
display:block;
justify-content:stretch;
}
.service-city-card h3{
font-size:var(--t-small);
line-height:1.3;
text-shadow:0 1px 3px rgba(8,26,24,.55);
}
/* ==========================================================================
18.14 Опорные цены и иконки шагов на главной
========================================================================== */
.price-list div a{
color:var(--brand-dark);
font-weight:900;
text-align:right;
text-decoration:none;
white-space:nowrap;
}
.price-list div a:hover{ text-decoration:underline; text-underline-offset:4px; }
.price-list-note{
grid-column:1 / -1;
margin:14px 0 0;
color:#5b6869;
font-size:var(--t-small);
line-height:1.6;
}
.price-list-all{
display:inline-block;
margin-left:4px;
color:var(--brand-dark);
font-weight:800;
white-space:nowrap;
}
/* Иконка шага вместо номера: тот же круг 42×42, но со светлым фоном —
зелёные иконки на тёмном круге не читались. */
.process-list span.process-icon{
background:#eaf3f0;
padding:6px;
}
.process-list span.process-icon img{
width:100%;
height:100%;
object-fit:contain;
}
/* 18.15 Анонс блога на главной */
.blog-home{ padding-bottom:8px; }
.blog-home .blog-grid{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.blog-home-all{ margin:16px 0 0; }
.blog-home-all a{ color:var(--brand-dark); font-weight:800; }
@media (max-width:900px){ .blog-home .blog-grid{ grid-template-columns:1fr; } }
/* ==========================================================================
18.16 Ссылки на страницы доверия в подвале статьи
Ни одна из 606 страниц услуг и городов не вела в теле на «Цены»,
«О компании», «Вопросы» и «Контакты» — весь вес уходил в каталог городов.
========================================================================== */
.trust-links{ padding:44px 0 8px; }
.trust-links h2{ margin:0 0 18px; font-size:var(--t-h3); }
.trust-links-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px;
margin:0;
padding:0;
list-style:none;
}
.trust-links-list a{
display:grid;
gap:4px;
height:100%;
align-content:start;
padding:16px 18px;
border:1px solid rgba(24,39,40,.12);
border-radius:12px;
background:#fff;
color:#162526;
text-decoration:none;
}
.trust-links-list a:hover{ border-color:rgba(25,133,111,.42); }
.trust-links-list strong{ color:var(--brand-dark); font-size:var(--t-small); }
.trust-links-list span{ color:#5b6869; font-size:var(--t-micro); line-height:1.5; }
@media (max-width:760px){
.trust-links{ padding:32px 0 4px; }
.trust-links-list{ grid-template-columns:1fr; }
}
/* 18.17 Мессенджеры в герое главной */
.hero-messengers{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-top:14px;
}
.hero-messengers>span{
margin-right:2px;
color:#3d4f4c;
font-size:var(--t-micro);
font-weight:700;
}
/* 18.18 Подпись к фотографии города (атрибуция Wikimedia Commons).
Лежит внутри .city-detail-visual, у которого position:relative и
overflow:hidden, а сама фотография — absolute на всю карточку. В обычном
потоке подпись оказывается ПОД картинкой и невидима, поэтому она тоже
абсолютная и с z-index выше картинки. */
.photo-credit{
position:absolute;
z-index:2;
top:10px;
right:12px;
max-width:calc(100% - 24px);
margin:0;
padding:2px 7px;
border-radius:6px;
background:rgba(12,24,22,.42);
color:#f2f6f5;
font-size:10px;
line-height:1.45;
text-align:right;
opacity:.8;
transition:opacity .15s ease, background .15s ease;
}
.photo-credit:hover{ opacity:1; background:rgba(12,24,22,.62); }
.photo-credit a{
color:inherit;
text-decoration:none;
}
.photo-credit a:hover{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:760px){
.photo-credit{ top:8px; right:8px; font-size:9px; }
}
/* 18.19 Услуги по состоянию на городских страницах.
Страницы «уход после инсульта», «паллиативный уход» и остальные семь имели
по 1–3 входящие ссылки на весь сайт. Блок раздаёт их с городских страниц,
по четыре штуки со сдвигом по городу. */
.care-needs{ padding:44px 0 8px; }
.care-needs-list{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:10px;
margin:18px 0 0;
padding:0;
list-style:none;
}
.care-needs-list a{
display:block;
padding:14px 16px;
border:1px solid #e2e8e6;
border-radius:12px;
background:#fff;
color:#22322f;
font-size:var(--t-small);
font-weight:600;
line-height:1.4;
text-decoration:none;
transition:border-color .15s ease, transform .15s ease;
}
.care-needs-list a:hover{ border-color:#b9cdc8; transform:translateY(-1px); }
.care-needs-all{
display:inline-block;
margin-top:16px;
color:#3d4f4c;
font-size:var(--t-micro);
font-weight:700;
text-decoration:none;
}
.care-needs-all:hover{ text-decoration:underline; }
@media (max-width:760px){
.care-needs{ padding:32px 0 4px; }
.care-needs-list{ grid-template-columns:1fr; }
}
/* 18.20 Подпись автора статьи. Раньше у блога не было ни автора, ни разметки
Article: на тему ухода анонимный текст — слабый сигнал доверия. */
.article-byline{
margin:14px 0 0;
color:#5b6869;
font-size:var(--t-micro);
line-height:1.6;
}
.article-byline-label{ font-weight:700; color:#3d4f4c; }
.article-byline a{
color:#3d4f4c;
font-weight:600;
text-decoration:underline;
text-underline-offset:2px;
}
.article-byline a:hover{ color:#22322f; }
.article-byline-role{ color:#7a8785; }
.article-byline-sep{ margin:0 4px; color:#b9cdc8; }
/* 18.21 Таблица внутри .utility-prose. В этом блоке выводится markdown-тело
страниц раздела «услуга в городе», а стилей для таблиц у него не было —
прайс отрисовывался голым HTML. Повторяем разметку прайса городских
страниц, включая мобильную раскладку карточками: три колонки в 360 px
не помещаются, а горизонтальный скролл страницы недопустим.
Две грабли, на которые тут наступили. Первая: --svc-line объявлена
только внутри .service-system, а этот шаблон в неё не завёрнут — все
объявления с ней молча схлопывались в border:0. Берём глобальную --line.
Вторая: выравнивание колонок goldmark пишет инлайном по разметке
|---:| в самом markdown, поэтому text-align из этого файла до ячеек
не доходит — правая колонка задана в тексте страницы. */
.utility-prose table{
width:100%; margin:16px 0; border-collapse:collapse;
background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.utility-prose th,.utility-prose td{ padding:12px 16px; font-size:var(--t-small); line-height:1.5; }
.utility-prose thead th{ background:var(--brand-soft); color:var(--brand-dark); font-weight:700; }
.utility-prose td:last-child{ white-space:nowrap; }
.utility-prose tbody tr + tr th,.utility-prose tbody tr + tr td{ border-top:1px solid var(--line); }
.utility-prose td:last-child{ color:var(--brand-dark); font-weight:700; }
.utility-prose td:first-child{ font-weight:600; color:var(--ink); }
.utility-prose hr{ margin:28px 0; border:0; border-top:1px solid var(--line); }
@media (max-width:760px){
.utility-prose table,.utility-prose tbody,.utility-prose tr,.utility-prose th,.utility-prose td{ display:block; width:100%; }
.utility-prose thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.utility-prose table{ border:0; background:transparent; }
.utility-prose tbody tr{ margin-bottom:10px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.utility-prose tbody tr + tr th,.utility-prose tbody tr + tr td{ border-top:0; }
.utility-prose tbody td{ border-top:1px solid var(--line); }
}