:root {
  color-scheme: light;

  --wp--preset--color--field: #fcfcf9;
  --wp--preset--color--surface: #fffdfa;
  --wp--preset--color--surface-alt: #f6f1eb;
  --wp--preset--color--surface-strong: #f1e7dc;
  --wp--preset--color--ink: #161311;
  --wp--preset--color--ink-soft: #3b322c;
  --wp--preset--color--heading: #1e1b19;
  --wp--preset--color--text: #5d5650;
  --wp--preset--color--text-soft: #8c857e;
  --wp--preset--color--line: #ece6de;
  --wp--preset--color--primary: #fd4901;
  --wp--preset--color--primary-deep: #c63a00; /* 5.1:1 on the field, so hover and accent text pass AA */
  --wp--preset--color--primary-soft: #ffe8df;
  --wp--preset--color--focus: #ff7f4a;
  --wp--preset--color--success: #1f7a4f;

  --wp--preset--font-family--display: "Raleway", "Segoe UI", sans-serif;
  --wp--preset--font-family--body: "Manrope", "Segoe UI", sans-serif;

  --wp--preset--font-size--xs: 0.75rem;
  --wp--preset--font-size--sm: 0.875rem;
  --wp--preset--font-size--md: 1rem;
  --wp--preset--font-size--lg: 1.125rem;
  --wp--preset--font-size--xl: clamp(1.375rem, 1.04rem + 1.18vw, 1.875rem);
  --wp--preset--font-size--2xl: clamp(1.75rem, 1.2rem + 1.75vw, 2.5rem);
  --wp--preset--font-size--3xl: clamp(2.5rem, 2rem + 1.2vw, 3.25rem);
  --wp--preset--font-size--display: clamp(3.25rem, 2.8rem + 1.1vw, 4.5rem);

  --wp--preset--spacing--2xs: 0.375rem;
  --wp--preset--spacing--xs: 0.625rem;
  --wp--preset--spacing--sm: 0.875rem;
  --wp--preset--spacing--md: 1.125rem;
  --wp--preset--spacing--lg: 1.5rem;
  --wp--preset--spacing--xl: 2rem;
  --wp--preset--spacing--2xl: 2.75rem;
  --wp--preset--spacing--3xl: 3.5rem;
  --wp--preset--spacing--4xl: 4.5rem;
  --wp--preset--spacing--5xl: 5.5rem;
  --wp--preset--spacing--6xl: 7rem;

  --wp--preset--radius--sm: 1rem;
  --wp--preset--radius--md: 1.5rem;
  --wp--preset--radius--lg: 2rem;
  --wp--preset--radius--pill: 999px;

  --wp--preset--shadow--soft: 0 20px 50px rgba(51, 37, 26, 0.08);
  --wp--preset--shadow--button: 0 16px 30px rgba(253, 73, 1, 0.18);

  --wp--preset--motion--fast: 180ms;
  --wp--preset--motion--base: 280ms;
  --wp--preset--easing--out: cubic-bezier(0.22, 1, 0.36, 1);

  --color-bg: var(--wp--preset--color--field);
  --color-surface: var(--wp--preset--color--surface);
  --color-surface-alt: var(--wp--preset--color--surface-alt);
  --color-surface-strong: var(--wp--preset--color--surface-strong);
  --color-ink: var(--wp--preset--color--ink);
  --color-ink-soft: var(--wp--preset--color--ink-soft);
  --color-heading: var(--wp--preset--color--heading);
  --color-text: var(--wp--preset--color--text);
  --color-text-soft: var(--wp--preset--color--text-soft);
  --color-line: var(--wp--preset--color--line);
  --color-primary: var(--wp--preset--color--primary);
  --color-primary-deep: var(--wp--preset--color--primary-deep);
  --color-primary-soft: var(--wp--preset--color--primary-soft);
  --color-focus: var(--wp--preset--color--focus);
  --color-success: var(--wp--preset--color--success);

  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);

  /* Role type scale. Every text on the page uses one of these roles; fluid roles
     interpolate linearly between a 390px phone and a 1440px desktop
     (values below read phone → desktop). Ratio between adjacent heading roles
     is at least 1.5, body-side roles step by about 1.15. */
  --cd-text-display: clamp(4rem, 0.75rem + 7vw, 9rem);            /* 66 → 113 hero name (phone via --cd-mobile-brand) */
  --cd-text-figure: clamp(4rem, 3.26rem + 3.05vw, 6rem);           /* 64 → 96 offer figure */
  --cd-text-h2: clamp(2rem, 1.58rem + 1.71vw, 3.125rem);           /* 32 → 50 every section title */
  --cd-text-h3: clamp(1.375rem, 1.19rem + 0.76vw, 1.875rem);       /* 22 → 30 card and panel titles, key prices */
  --cd-text-title: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);     /* 18 → 20 list items, captions, form title, hero descriptor */
  --cd-text-lede: clamp(1.0625rem, 0.99rem + 0.29vw, 1.25rem);     /* 17 → 20 hero paragraph */
  --cd-text-body: clamp(1rem, 0.96rem + 0.1vw, 1.0625rem);         /* 16 → 17 paragraphs */
  --cd-text-ui: 1rem;                                               /* 16 buttons, form fields */
  --cd-text-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);    /* 14 → 15 secondary lines, nav, kickers, meta */
  --cd-text-micro: 0.8125rem;                                       /* 13 hero visit block, legal footer */
  --cd-title-leading: 1.2;

  --type-display: var(--wp--preset--font-size--display);
  --type-section: var(--cd-text-h2);
  --type-subsection: var(--wp--preset--font-size--2xl);
  --type-card: var(--cd-text-title);
  --type-body: var(--cd-text-body);
  --type-body-lg: var(--cd-text-title);
  --type-label: var(--cd-text-small);

  --content-width: 90rem;
  --site-width: var(--content-width);
  --site-gutter: clamp(1.25rem, 0.6rem + 2.4vw, 2.875rem);
  --section-gap-sm: clamp(3.5rem, 2.75rem + 1.5vw, 5rem);
  --section-gap-md: clamp(4.5rem, 3.4rem + 2vw, 6.5rem);
  --section-gap-lg: clamp(5.5rem, 4rem + 3vw, 8.5rem);
  --section-gap: var(--section-gap-md);
  --content-gap: clamp(1.5rem, 1rem + 1vw, 2.5rem);
  --header-height: 5.75rem;

  --z-header: 20;
  --z-skip: 30;

  /* Redesigned sections: hero, "о компании", специалисты, галерея, акции.
     Scoped to those blocks so the preserved sections keep their own scale. */
  --section-gap-edit: clamp(3rem, 0.75rem + 6.1vw, 6.5rem);
  --edit-gap: clamp(1rem, 0.5rem + 1.4vw, 2rem);
  --edit-title: var(--cd-text-h2);
  --edit-body: var(--cd-text-body);
  --edit-note: var(--cd-text-small);
  --edit-tap: 3rem;
  --edit-rule: 1px solid var(--color-line);

  --hero-name: clamp(4rem, 1.5rem + 8vw, 9rem);
  /* «Индивидуальный» is one unbreakable 14-character word in a 5/12 column.
     Measured at 8.32x its own font size in Raleway 800, so the size is
     derived from the column width instead of the ideal scale — the plan
     asks to step the size down rather than let the word run over. */
  --accent-phrase: clamp(2.5rem, 4.4vw - 0.14375rem, 4.25rem);
  --promo-figure: clamp(5.5rem, 2rem + 9.6vw, 12rem);

  /* Citydog wireframe layouts: hero, service selector, benefits and gallery. */
  --cd-heading-leading: 1.08;
  --cd-label-leading: 1.3;
  --cd-tracking: -0.035em;
  --cd-intro-width: 52rem;
  --cd-body-measure: 46ch;
  --cd-wide-width: 124rem;
  /* Hero type scale at 1440px: 14 / 16 / 19 / 20 / 27 / 113. The descriptor
     uses the site kicker voice (Raleway 700, open tracking) at body size. */
  --cd-hero-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.8fr);
  --cd-hero-descriptor: var(--cd-text-title);
  --cd-hero-descriptor-tracking: 0.08em;
  --cd-hero-descriptor-gap: clamp(0.25rem, 0.6vw, 0.75rem);
  --cd-hero-brand: var(--cd-text-display);
  /* Stage image: scaling from the bottom-right corner moves the collie toward
     the copy without exposing an edge of the photograph. */
  --cd-hero-stage-transform: scale(1.1);
  --cd-hero-stage-origin: 100% 100%;
  --cd-hero-height: clamp(40rem, 43vw, 56rem);
  --cd-hero-body: var(--cd-text-lede);
  --cd-hero-body-measure: 34ch;
  --cd-hero-copy-gap: clamp(1.75rem, 2.8vw, 3rem);
  --cd-hero-field: #f7f4ee;
  /* Button labels are a fixed UI role at body size, not fluid display type:
     16px everywhere, one step up (17px) for the hero pair. */
  --cd-hero-note: 1.0625rem;
  --cd-button-type: var(--cd-text-ui);
  --cd-form-message-height: 8rem;
  --cd-hero-button-height: 3.75rem;
  --cd-hero-service: var(--cd-text-title);
  --cd-hero-card-note: var(--cd-text-small);
  --cd-hero-contact-note: var(--cd-text-micro);
  --cd-hero-contact-icon: 1.25rem;
  --cd-hero-card-inset: clamp(1rem, 1.55vw, 1.875rem);
  --cd-hero-service-row: 7rem;
  --cd-hero-thumb-size: clamp(3.25rem, 5.8vw, 7rem);
  --cd-hero-thumb-tablet-size: 7rem;
  --cd-hero-card-tablet-width: 38rem;
  --cd-hero-card-width: 94%;
  --cd-hero-card-height: calc(var(--cd-hero-height) * 0.9);
  --cd-hero-action-rule: 1px solid rgba(22, 19, 17, 0.25);
  --cd-hero-banner-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent);
  --cd-hero-banner-measure: 26ch;
  --cd-hero-mobile-photo-position: 60% center;
  --cd-hero-tablet-height: 31rem;
  --cd-hero-mobile-height: 25rem;
  --cd-portrait-width: 135%;
  --cd-direction-padding: clamp(1.25rem, 1.75vw, 2.125rem);
  --cd-direction-title: var(--cd-text-h3);
  --cd-orange-rule: 1px solid rgba(22, 19, 17, 0.2);
  --cd-mobile-descriptor: var(--cd-text-small);
  --cd-mobile-brand: clamp(4rem, 17vw, 7.5rem);
  --cd-hero-title: clamp(2rem, 1.15rem + 2.45vw, 3.75rem);
  --cd-hero-image-ratio: 2 / 3;
  --cd-mobile-hero-ratio: 3 / 4;
  --cd-tablet-small-ratio: 1.7;
  --cd-portrait-focus: 50% 22%;
  --cd-benefit-measure: 29ch;
  --cd-benefit-icon: 2rem;
  --cd-gallery-ratio: 2.45;
  --cd-gallery-mobile-ratio: 0.95;
  --cd-gallery-stage-max: calc(100svh - 12rem);
  --cd-gallery-caption-overlay: linear-gradient(0deg, rgba(22, 19, 17, 0.72), rgba(22, 19, 17, 0.12) 50%, transparent);
  --cd-gallery-caption: var(--cd-text-title);
  --cd-arrow-size: 1.125rem;
  --cd-icon-offset: 0.1875rem;
  --cd-pressed-opacity: 0.8;
  --cd-image-scale: 1.025;
  --cd-image-duration: 500ms;
  --cd-switch-seconds: 0.5;
  --cd-placeholder-bg: #dedede;
  --cd-placeholder-ink: #484848;
  --cd-placeholder-height: 15rem;
  --cd-carousel-arrow: 3.5rem;
  --cd-carousel-glyph: 1.5rem;
  --cd-offer-height: clamp(18rem, 21vw, 20rem);
  --cd-offer-title: var(--cd-text-h3);
  --cd-offer-figure: var(--cd-text-figure);
  --cd-offer-scale: 1.04;
  --cd-offer-lift: -0.375rem;

  /* Services: clipped photo slider and the directions route. */
  /* Kickers and card meta: one step above micro so they hold their own beside 50px titles. */
  --cd-kicker-size: var(--cd-text-small);
  --cd-micro-tracking: 0.16em;
  --cd-directions-columns: minmax(0, 1.62fr) minmax(18rem, 0.78fr);
  --cd-directions-gap: clamp(2rem, 2.8vw, 3.5rem);
  --cd-slider-ratio: 1.49;
  --cd-slider-ratio-mobile: 1.05;
  --cd-slider-inset: clamp(1.25rem, 2.6vw, 2.5rem);
  --cd-slider-controls-right: 9%;
  --cd-slider-button: clamp(2.75rem, 3.6vw, 3.5rem);
  --cd-slide-overlay: linear-gradient(0deg, rgba(22, 19, 17, 0.7), rgba(22, 19, 17, 0.08) 45%, rgba(22, 19, 17, 0.3));
  --cd-on-photo-muted: rgba(255, 253, 250, 0.78);
  --cd-on-photo-rule: rgba(255, 253, 250, 0.55);
  --cd-route-stroke: 0.125rem;
  --cd-dot-size: 0.875rem;
  --cd-dot-active: 1.5rem;
  --cd-dot-ring: 0.1875rem;
  --cd-dot-slot: 1.5rem;
  --cd-wave-step: clamp(0.375rem, 0.9vw, 0.875rem);
  --cd-direction-row: clamp(4.5rem, 5.6vw, 5.5rem);
  --cd-avatar: 3.5rem;
  --cd-avatar-overlap: -1rem;
  --cd-avatar-ring: 0.1875rem;

  /* О центре: photo stage and a facts strip. */
  --cd-center-radius: clamp(1.5rem, 3vw, 3.5rem);
  --cd-center-stage-height: clamp(36rem, 40vw, 44rem);
  --cd-center-pad: clamp(2.5rem, 5vw, 5rem);
  --cd-center-copy-width: 38%;
  --cd-center-leading: 0.92;
  --cd-center-overlay: linear-gradient(90deg, rgba(22, 19, 17, 0.88), rgba(22, 19, 17, 0.62) 30%, rgba(22, 19, 17, 0.1) 58%, rgba(22, 19, 17, 0.2));
  --cd-center-overlay-mobile: linear-gradient(180deg, rgba(22, 19, 17, 0.72), rgba(22, 19, 17, 0.9));
  --cd-rule-short: 2rem;
  --cd-fact-thumb: clamp(6.5rem, 10vw, 10rem);
  --cd-fact-thumb-ratio: 1.3;
  --cd-center-facts-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  --cd-center-fact-measure: 30ch;
  --cd-center-link-circle: clamp(3.5rem, 4.4vw, 4.5rem);
  --cd-sup: 0.42em;

  /* Shared section heading, controls and progress steps. */
  --cd-head-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  --cd-control-rule: rgba(22, 19, 17, 0.28);
  --cd-disabled-opacity: 0.35;
  --cd-step-dot: 1.125rem;
  --cd-step-dot-ring: 0.125rem;
  --cd-step-avatar: clamp(3.5rem, 4.6vw, 4.5rem);
  --cd-step-mobile-width: 62%;
  --cd-step-people-mobile-width: 78%;

  /* Специалисты: intro, slanted stage (#cd-team-shape), team list. */
  --cd-team-columns: minmax(0, 0.92fr) minmax(0, 1.4fr) minmax(16rem, 0.68fr);
  --cd-team-stage-min: clamp(36rem, 50vw, 46rem);
  --cd-team-stage-mobile-ratio: 4 / 5;
  --cd-team-overlay: linear-gradient(0deg, rgba(22, 19, 17, 0.7), rgba(22, 19, 17, 0.05) 42%, transparent);
  --cd-team-thumb: clamp(4.5rem, 6.4vw, 6rem);
  --cd-team-marker: 0.1875rem;
  --cd-team-benefit-icon: 2.5rem;

  /* Галерея: the next photo peeks past the container edge. */
  --cd-gallery-slide-duration: 700ms;

  /* Акции: lead offer beside the intro, a rail of two cards per view. */
  --cd-offers-top-columns: minmax(0, 1fr) minmax(0, 2.25fr);
  --cd-offer-lead-height: clamp(24rem, 32vw, 29rem);
  --cd-offer-lead-copy: minmax(0, 0.95fr);
  --cd-offer-lead-photo: 58%;
  --cd-offer-photo-width: 56%;
  --cd-offer-slant: 24%;
  --cd-offer-rail-card: calc((100% - var(--edit-gap)) / 2);
  --cd-offer-rail-card-tablet: 78%;
  --cd-offer-rail-card-mobile: 88%;
  --cd-offer-mobile-photo: 13rem;

  /* Phone compositions that keep each section's signature. */
  --cd-hero-card-overlap: 4.5rem;
  --cd-wave-step-phone: 0.75rem;
  --cd-center-phone-height: 46rem;
  --cd-center-phone-focus: 48% 12%;
  --cd-center-overlay-phone: linear-gradient(180deg, rgba(22, 19, 17, 0.2), rgba(22, 19, 17, 0.04) 20%, rgba(22, 19, 17, 0.8) 44%, rgba(22, 19, 17, 0.94));
  --cd-team-chip-width: 9.5rem;
  --cd-team-chip-ratio: 4 / 3;
  --cd-gallery-phone-panel: 86%;
  --cd-offer-phone-slant: 78%;
  --cd-step-avatar-phone: 4rem;

  /* Финальный CTA и тёмный футер. */
  --cd-cta-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.95fr);
  --cd-cta-pad: clamp(1rem, 2.4vw, 2.5rem);
  --cd-cta-photo-min: 28rem;
  --cd-cta-photo-focus: 12% center;
  --cd-cta-photo-mobile-ratio: 4 / 3;
  --cd-cta-photo-mobile-focus: 82% center;
  --cd-cta-photo-mobile-overlay: linear-gradient(90deg, rgba(247, 244, 238, 0.96) 0%, rgba(247, 244, 238, 0.88) 42%, rgba(247, 244, 238, 0.24) 68%, rgba(247, 244, 238, 0.08) 100%);
  --cd-focus-ring: 0.1875rem;
  --cd-cta-contact-icon: 1.5rem;
  --cd-on-dark-muted: rgba(255, 253, 250, 0.72);
  --cd-on-dark-rule: rgba(255, 253, 250, 0.16);

  /* Отзывы: photograph beside the quote. */
  --cd-note-measure: 62ch;
  --cd-reviews-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  --cd-review-photo-ratio: 1.78;
  --cd-review-avatar: 3.5rem;
  --cd-reviews-actions-width: calc((100% - var(--cd-directions-gap)) / 2.3);
}