/*
 * Direction B redesign for the category / subcategory listing pages.
 * Loaded directly from <link rel="stylesheet"> (no webpack).
 * Mirrors the convention of tour-content.css.
 */

/* ─── Page frame ─────────────────────────────────────────────────────────────
   The site's navbar is position:fixed (z-index 1030, ~64px tall), so the page
   content needs a padding-top to clear it. The body's content was also
   historically constrained to a centered max-width — restore that. */
main#main {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 80px;
    /* No -webkit-font-smoothing override: the macOS default of
       `subpixel-antialiased` is sharper than `antialiased` on solid
       backgrounds. Forcing `antialiased` thins strokes and produces the
       "watered" look in Safari, especially inside the tile cards (which
       become composited layers via border-radius+overflow:hidden+box-shadow).
       See https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
}

/* ─── Hero band ──────────────────────────────────────────────────────────── */
.category-hero {
    background: linear-gradient(180deg, var(--cp-cream-1), var(--cp-cream-2));
    /* Decorative accent stripe — brand colour (teal in Classic, accent in other themes). */
    border-left: 4px solid var(--kohsanuk-brand);
    padding: 26px 32px 24px;
    margin: 0 0 0 0;
    /* Defensive resets — the site's global stylesheets target the `header`
       element directly (bs4style sets height:100vh + font-family:Ubuntu,
       bootstrap4 sets white-space:nowrap). Override here so this `<header>`
       behaves like a plain editorial band. */
    height: auto;
    font-family: inherit;
    white-space: normal;
}
.category-hero__crumb {
    font-size: 11px;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.category-hero__crumb-link {
    color: var(--cp-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.category-hero__crumb-link:hover,
.category-hero__crumb-link:focus-visible {
    /* Navigational link hover — brand colour, not action. */
    color: var(--kohsanuk-brand);
    border-bottom-color: var(--kohsanuk-brand);
    text-decoration: none;
}
.category-hero__crumb-sep {
    margin: 0 6px;
    color: var(--cp-text-muted);
    opacity: 0.6;
}
.category-hero__crumb-current {
    color: var(--cp-text);
}
.category-hero__title {
    margin: 0 0 10px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    line-height: 1.2;
    color: var(--cp-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.category-hero__intro {
    margin: 0 0 14px 0;
    max-width: 680px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cp-text-soft);
}
.category-hero__stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.category-hero__stat {
    background: var(--kohsanuk-cream-200);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 12px;
    color: var(--cp-text-soft);
    font-weight: 500;
}

/* ─── "Where do you stay?" filter pills ──────────────────────────────────── */
.cp-filter {
    padding: 18px 32px;
    background: var(--kohsanuk-surface);
    border-bottom: 1px solid var(--cp-border);
}
.cp-filter__label {
    font-size: 12px;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.cp-filter__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp-filter__pill {
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--kohsanuk-rule);
    color: var(--cp-text-soft);
    border-radius: 22px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cp-filter__pill:hover {
    /* Navigational filter — brand colour for hover/active so accent stays reserved for CTAs. */
    border-color: var(--kohsanuk-brand);
    color: var(--kohsanuk-brand);
}
.cp-filter__pill--active {
    background: var(--kohsanuk-brand);
    border-color: var(--kohsanuk-brand);
    color: var(--kohsanuk-surface);
}

/* ─── Subcategory tile grid (category-index pages) ───────────────────────── */
.subcat-grid {
    padding: 24px 32px;
    background: var(--cp-tile-bg);
}
.subcat-grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.subcat-tile {
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--cp-card-shadow);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;
}
.subcat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--kohsanuk-shadow-card);
}
.subcat-tile__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.subcat-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.subcat-tile__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, .92);
    border-radius: 14px;
    padding: 3px 11px;
    font-size: 11px;
    color: var(--cp-text-soft);
    font-weight: 700;
}
.subcat-tile__title {
    padding: 14px 16px 16px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--cp-text);
    margin: 0;
}

/* ─── Sort row (subcategory pages) ───────────────────────────────────────── */
.cp-sort {
    padding: 14px 32px;
    background: var(--kohsanuk-surface);
    border-bottom: 1px solid var(--cp-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    font-size: 12px;
    align-items: center;
}
.cp-sort__label { color: var(--cp-text-soft); }
.cp-sort__btn {
    border: 1px solid var(--kohsanuk-rule);
    color: var(--cp-text-soft);
    border-radius: 14px;
    padding: 4px 11px;
    text-decoration: none;
}
/* Explicit hover states — without them the global bootstrap a:hover blue
   leaks onto the pills (blue label on teal for the active pill). */
.cp-sort__btn:hover,
.cp-sort__btn:focus-visible {
    border-color: var(--kohsanuk-brand);
    color: var(--kohsanuk-brand);
    text-decoration: none;
}
.cp-sort__btn--active,
.cp-sort__btn--active:hover,
.cp-sort__btn--active:focus-visible {
    /* Sort toggle is navigational, not a CTA — brand colour. */
    background: var(--kohsanuk-brand);
    border-color: var(--kohsanuk-brand);
    color: var(--kohsanuk-surface);
}

/* ─── Tour card (C-style horizontal) ─────────────────────────────────────── */
.tour-card-grid {
    padding: 22px 32px;
    background: var(--cp-tile-bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.tour-card {
    /* Root is a <div> with a stretched title link (::after overlay) so the
       whole card incl. thumbnail opens the tour while the footer carries
       real View + Book links above the overlay. */
    position: relative;
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--cp-card-shadow);
    display: flex;
    /* min-, not fixed: price now lives above the divider, so split cards
       need a little more room; the cards-grid rows equalise heights. */
    min-height: 180px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.tour-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--kohsanuk-shadow-card);
}
.tour-card__image {
    width: 40%;
    flex-shrink: 0;
    overflow: hidden;
}
.tour-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tour-card__body {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.tour-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--cp-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tour-card__facts {
    list-style: none;
    margin: 9px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--cp-text-muted);
}
.tour-card__facts i {
    margin-right: 4px;
    color: var(--cp-text-muted);
}
.tour-card__footer {
    /* Price + buttons share the row; flex-wrap is the "doesn't fit" valve —
       the buttons drop to their own line and the card grows (min-height,
       not fixed height) instead of clipping content. */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 10px;
    border-top: 1px solid var(--cp-border);
    padding-top: 10px;
    margin-top: 10px;
}
.tour-card__price {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.tour-card__price-label {
    font-size: 10px;
    color: var(--cp-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tour-card__price-value {
    font-size: 16px;
    font-weight: 700;
    /* Brand-dark teal — the tour-page (dossier rail) price colour, chosen
       2026-06-12 over the earlier action orange: two orange amounts next
       to the orange View button were too loud, and prices now share one
       colour identity across detail page, category cards and grid cards.
       Orange stays exclusive to CTAs. */
    color: var(--kohsanuk-brand-dark);
}
/* Group/private split — tours offering both types show two compact
   "from" lines instead of the ambiguous combined minimum. */
.tour-card__price--split {
    line-height: 1.45;
}
.tour-card__price-row {
    font-size: 12px;
    color: var(--cp-text-soft);
    white-space: nowrap;
}
.tour-card__price-row b {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kohsanuk-brand-dark);
}
.tour-card__price-row small {
    font-size: 10.5px;
    color: var(--cp-text-muted);
}
/* Stretched title link — covers the card so any non-button click opens
   the tour page (replaces the old whole-card <a> wrapper). */
.tour-card__link {
    color: inherit;
    text-decoration: none;
}
.tour-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
}
.tour-card__link:hover { color: var(--kohsanuk-brand-dark); }
/* Footer buttons — "twin tinted ghosts" (chosen 2026-06-12 over the
   orange View): neutral ghost View + brand-tinted ghost Book. Orange is
   reserved for primary CTAs (tour-page Book Now); the card Book is a
   secondary booking entry. z-index lifts them above the stretched link. */
.tour-card__btns {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 7px;
    margin-left: auto;
}
.tour-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-border);
    color: var(--cp-text);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Hover highlight = action orange (user-picked): resting state stays calm
   teal/neutral, the orange appears only as the interactive response. */
.tour-card__btn:hover {
    border-color: var(--kohsanuk-action);
    color: var(--kohsanuk-action-dark);
    background: var(--kohsanuk-action-tint);
    text-decoration: none;
}
.tour-card__btn--book {
    background: var(--kohsanuk-brand-tint);
    border-color: var(--kohsanuk-brand-soft);
    color: var(--kohsanuk-brand-dark);
}
.tour-card__btn--book:hover {
    background: var(--kohsanuk-action-tint);
    border-color: var(--kohsanuk-action);
    color: var(--kohsanuk-action-dark);
}

/* ─── Sibling-categories strip ───────────────────────────────────────────── */
.sibling-strip {
    padding: 22px 32px 26px;
    background: var(--kohsanuk-surface);
    border-top: 1px solid var(--cp-border);
}
.sibling-strip__label {
    font-size: 12px;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.sibling-strip__items {
    display: flex;
    gap: 10px;
}
.sibling-strip__item {
    flex: 1;
    background: var(--kohsanuk-cream-100);
    padding: 14px 16px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--cp-text);
    font-size: 14px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}
.sibling-strip__item:hover,
.sibling-strip__item:focus,
.sibling-strip__item:active {
    background: var(--kohsanuk-brand);
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* ─── "Why book with us" section (home page editorial band) ──────────────── */
.why-us {
    background: var(--cp-cream-1);
    padding: 56px 32px 64px;
    border-top: 1px solid var(--cp-border);
}
.why-us__head {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}
.why-us__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Decorative eyebrow — brand colour. */
    color: var(--kohsanuk-brand);
    font-weight: 700;
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.why-us__eyebrow-rule {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: currentColor;
    opacity: 0.65;
}
.why-us__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--cp-text);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.why-us__lede {
    font-size: 15px;
    line-height: 1.6;
    color: var(--cp-text-soft);
    max-width: 600px;
    margin: 0 auto;
}
.why-us__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}
.why-us__card {
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-card-border);
    border-radius: 12px;
    padding: 28px 22px 24px;
    text-align: center;
    box-shadow: var(--cp-card-shadow);
}
.why-us__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-cream-2);
    /* Decorative icon — brand colour. */
    color: var(--kohsanuk-brand);
    font-size: 22px;
    margin-bottom: 16px;
}
.why-us__card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-text);
    margin: 0 0 8px;
    line-height: 1.3;
}
.why-us__card-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cp-text-soft);
    margin: 0;
}

/* ─── Contact form (shared partial — home page + /contact) ───────────────── */
.cp-contact {
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-card-border);
    border-radius: 12px;
    box-shadow: var(--cp-card-shadow);
    padding: 32px;
    max-width: 1040px;
    margin: 24px auto;
}
.cp-contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 36px;
    align-items: start;
}
.cp-contact__mark {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.cp-contact__mark img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 260px;
}
.cp-contact__form-wrap {
    min-width: 0;
}
.cp-contact__head {
    text-align: center;
    margin-bottom: 24px;
}
.cp-contact__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Decorative eyebrow — brand colour. */
    color: var(--kohsanuk-brand);
    font-weight: 700;
    margin: 0 0 10px;
}
.cp-contact__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--cp-text);
    margin: 0 0 8px;
}
.cp-contact__lede {
    font-size: 14px;
    color: var(--cp-text-soft);
    margin: 0;
}
.cp-contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.cp-contact__field { display: block; }
.cp-contact__field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-text-muted);
    margin-bottom: 6px;
}
.cp-contact__input,
.cp-contact__textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--cp-text);
    background: var(--kohsanuk-surface);
    border: 1px solid var(--kohsanuk-rule);
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-contact__input:focus,
.cp-contact__textarea:focus {
    /* Form focus is tied to the Send CTA → action colour. */
    outline: none;
    border-color: var(--kohsanuk-action);
    box-shadow: 0 0 0 3px var(--kohsanuk-action-soft);
}
.cp-contact__textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}
.cp-contact__field--wide { margin-bottom: 14px; }
.cp-contact__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.cp-contact__status {
    font-size: 13px;
    color: var(--cp-text-soft);
    flex: 1;
    min-width: 0;
}
.cp-contact__status.is-error { color: var(--kohsanuk-danger-text); }
.cp-contact__status.is-success { color: var(--kohsanuk-success-text); }
.cp-contact__send {
    /* Primary CTA — action colour (orange in Classic). */
    appearance: none;
    background: var(--kohsanuk-action);
    color: var(--kohsanuk-surface);
    border: none;
    border-radius: 6px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.cp-contact__send:hover {
    background: var(--kohsanuk-action-dark);
    transform: translateY(-1px);
}
.cp-contact__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ─── /contact page trust signals + channels ─────────────────────────────── */
.contact-page-hero {
    background: linear-gradient(180deg, var(--cp-cream-1), var(--cp-cream-2));
    /* Decorative accent stripe — brand colour. */
    border-left: 4px solid var(--kohsanuk-brand);
    padding: 32px 32px 28px;
    margin-bottom: 0;
}
.contact-page-hero__crumb {
    font-size: 11px;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.contact-page-hero__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--cp-text);
    margin: 0 0 10px;
}
.contact-page-hero__lede {
    font-size: 15px;
    line-height: 1.6;
    color: var(--cp-text-soft);
    max-width: 680px;
    margin: 0;
}
.contact-trust {
    padding: 36px 32px;
    background: var(--kohsanuk-surface);
}
.contact-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.contact-trust__card {
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-card-border);
    border-radius: 10px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.contact-trust__card::before {
    /* Decorative left rule on trust cards — brand colour. */
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--kohsanuk-brand);
}
.contact-trust__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cp-cream-2);
    /* Decorative icon — brand colour. */
    color: var(--kohsanuk-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 14px;
}
.contact-trust__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-text);
    margin: 0 0 6px;
}
.contact-trust__body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cp-text-soft);
    margin: 0 0 8px;
}
.contact-trust__detail {
    font-size: 13px;
    color: var(--cp-text);
    font-weight: 500;
    word-break: break-word;
}
.contact-channels {
    padding: 24px 32px 36px;
    background: var(--cp-cream-2);
}
.contact-channels__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}
.contact-channels__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
}
.contact-channels__item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--kohsanuk-surface);
    border: 1px solid var(--cp-card-border);
    border-radius: 10px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.contact-channels__item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--kohsanuk-shadow-soft);
    text-decoration: none;
    color: inherit;
}
.contact-channels__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cp-cream-1);
    /* Decorative icon — brand colour. */
    color: var(--kohsanuk-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.contact-channels__label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-text-muted);
    margin: 0 0 2px;
    font-weight: 600;
}
.contact-channels__value {
    font-size: 14px;
    color: var(--cp-text);
    font-weight: 600;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .subcat-grid__list { grid-template-columns: 1fr 1fr; }
    .why-us__grid { grid-template-columns: repeat(2, 1fr); }
    .contact-trust__grid,
    .contact-channels__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .category-hero { padding: 20px 18px 18px; }
    .category-hero__title { font-size: 22px; }
    .category-hero__intro { font-size: 14px; }
    .cp-filter, .subcat-grid, .tour-card-grid, .cp-sort, .sibling-strip { padding-left: 18px; padding-right: 18px; }
    .subcat-grid__list { grid-template-columns: 1fr; }
    .tour-card-grid { grid-template-columns: 1fr; }
    .sibling-strip__items { flex-direction: column; }
    /* Tour card flips to vertical on phone */
    .tour-card {
        flex-direction: column;
        height: auto;
    }
    .tour-card__image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .why-us { padding: 44px 18px 50px; }
    .why-us__title { font-size: 24px; }
    .why-us__grid { grid-template-columns: 1fr; }
    .cp-contact { padding: 24px 18px; margin: 18px; }
    .cp-contact__row { grid-template-columns: 1fr; }
    .cp-contact__layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .cp-contact__mark { order: -1; padding: 0; }
    .cp-contact__mark img { width: 180px; }
    .contact-page-hero { padding: 22px 18px 20px; }
    .contact-page-hero__title { font-size: 26px; }
    .contact-trust, .contact-channels { padding-left: 18px; padding-right: 18px; }
    .contact-trust__grid,
    .contact-channels__grid { grid-template-columns: 1fr; }
}