/* ==========================================================================
   Company profile page ("/directory/pro/{slug}") styles.

   Namespaced under .cp / .cp-* for the same reason directory.css is namespaced
   under .dir: main.css, default.css and responsive.css are loaded on every
   public page, and the generic class names this page used to rely on
   (.company-info, .whitebox, .photogallery, .contact-info-list, .rating-list)
   are shared with the discussion, estimate and my-company screens.

   Tokens mirror directory.css so a visitor moving from search results to a
   profile stays in the same palette.
   ========================================================================== */

.cp {
    --cp-green: var(--serden-evergreen);
    --cp-green-deep: #0e2a1f;
    --cp-green-mid: #2d4e41;
    --cp-green-hover: var(--serden-evergreen-hover);
    --cp-ivory: var(--serden-ivory);
    --cp-sage: var(--serden-sage);
    --cp-tint: var(--serden-ivory);
    --cp-muted: var(--serden-text-secondary);
    --cp-ink: #29392f;
    --cp-line: var(--serden-stone);
    --cp-line-strong: rgba(21, 58, 43, 0.2);
    --cp-shadow: 0 18px 44px rgba(14, 42, 31, 0.1);
    --cp-shadow-sm: 0 6px 20px rgba(14, 42, 31, 0.07);
    --cp-star: #e2a33a;
    --cp-radius: 18px;

    /* The site header is fixed: 35px of margin plus a 60px pill. Anything that
       sticks or is scrolled to has to clear it. */
    --cp-header: 95px;

    background-color: var(--cp-tint);
    color: var(--cp-ink);
}

.cp-shell {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.cp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 60vh;
    padding: 160px 24px 80px;
    font-size: 15px;
    color: var(--cp-muted);
}

/* ================================================================== header */

.cp-hero {
    position: relative;
    overflow: hidden;
    padding: 128px 0 34px;
    background-color: var(--cp-sage);
    color: var(--cp-green);
}

.cp-hero-inner {
    position: relative;
    z-index: 1;
}

.cp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--cp-muted);
}

.cp-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cp-crumbs li + li::before {
    content: "/";
    color: rgba(82, 97, 89, 0.5);
}

.cp-crumbs a {
    color: var(--cp-muted);
}

.cp-crumbs a:hover {
    color: var(--cp-green);
    text-decoration: underline;
}

.cp-crumbs [aria-current="page"] {
    color: var(--cp-green);
}

.cp-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 28px 40px;
}

.cp-identity {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.cp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    padding: 10px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--cp-line), 0 8px 22px rgba(21, 58, 43, 0.1);
}

.cp-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cp-logo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-color: var(--cp-tint);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cp-green);
}

.cp-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid var(--cp-line);
    border-radius: 999px;
    background-color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-green);
}

.cp-badge i {
    font-size: 11px;
}

.cp-badge--elite {
    border-color: var(--cp-green);
    background-color: var(--cp-green);
    color: var(--cp-ivory);
}

.cp-badge--pro {
    border-color: var(--cp-green);
    background-color: #fff;
    color: var(--cp-green);
}

.cp-hero h1 {
    margin: 0;
    font-size: clamp(1.85rem, 3.1vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--cp-green);
}

.cp-edit {
    margin-left: 12px;
    font-size: 0.5em;
    vertical-align: middle;
    color: var(--cp-muted);
}

.cp-edit:hover {
    color: var(--cp-green);
}

.cp-hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 16px 0 0;
    font-size: 14.5px;
    color: var(--cp-muted);
}

.cp-hero-facts > span,
.cp-hero-facts > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cp-hero-facts i {
    font-size: 13px;
    color: var(--cp-muted);
}

.cp-hero-facts a {
    color: var(--cp-green);
}

.cp-hero-facts a:hover {
    color: var(--cp-green-hover);
    text-decoration: underline;
}

.cp-score {
    font-weight: 700;
    color: var(--cp-green);
}

.cp-claim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13.5px;
    color: var(--cp-muted);
    cursor: pointer;
}

.cp-claim:hover {
    color: var(--cp-green);
    text-decoration: underline;
}

/* ------------------------------------------------------------------- stars */

.cp-stars {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.cp-stars-track,
.cp-stars-fill {
    display: block;
}

.cp-stars-track {
    color: rgba(226, 163, 58, 0.32);
}

.cp-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--cp-star);
}

.cp-stars--lg {
    font-size: 22px;
    letter-spacing: 3px;
}

.cp-stars--sm {
    font-size: 13px;
    letter-spacing: 1px;
}

/* ----------------------------------------------------------------- actions */

.cp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cp-btn--accent {
    background-color: var(--cp-green);
    border-color: var(--cp-green);
    color: #fff;
}

.cp-btn--accent:hover {
    background-color: var(--cp-green-hover);
    border-color: var(--cp-green-hover);
    color: #fff;
}

/* On the evergreen quote card the accent button inverts to ivory. */
.cp-rail-cta .cp-btn--accent {
    background-color: var(--cp-ivory);
    border-color: var(--cp-ivory);
    color: var(--cp-green);
}

.cp-rail-cta .cp-btn--accent:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--cp-green);
}

.cp-btn--primary {
    background-color: var(--cp-green);
    border-color: var(--cp-green);
    color: #fff;
}

.cp-btn--primary:hover {
    background-color: var(--cp-green-hover);
    border-color: var(--cp-green-hover);
    color: #fff;
}

.cp-btn--outline {
    border-color: var(--cp-line-strong);
    background-color: #fff;
    color: var(--cp-green);
}

.cp-btn--outline:hover {
    border-color: var(--cp-green);
    background-color: var(--cp-green);
    color: #fff;
}

.cp-btn--ghost {
    border-color: var(--cp-line-strong);
    background-color: #fff;
    color: var(--cp-green);
}

.cp-btn--ghost:hover {
    border-color: var(--cp-green);
    background-color: var(--cp-green);
    color: #fff;
}

.cp-btn--icon {
    width: 46px;
    padding: 12px 0;
}

.cp-btn--save.is-saved i {
    color: var(--cp-green);
}

.cp-btn--save.is-saved:hover i {
    color: #fff;
}

.cp-btn--block {
    width: 100%;
}

.cp-btn--sm {
    padding: 10px 18px;
    font-size: 13.5px;
}

/* The share menu is a Bootstrap dropdown, restyled to match the cards. */
.cp-share .dropdown-menu {
    min-width: 208px;
    padding: 8px;
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    box-shadow: var(--cp-shadow);
}

.cp-share .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--cp-green);
}

.cp-share .dropdown-item i {
    width: 16px;
    font-size: 14px;
    text-align: center;
    color: var(--cp-muted);
}

.cp-share .dropdown-item:hover,
.cp-share .dropdown-item:focus {
    background-color: var(--cp-tint);
    color: var(--cp-green);
}

/* ================================================================ page nav */

.cp-nav {
    position: sticky;
    top: var(--cp-header);
    z-index: 15;
    border-bottom: 1px solid var(--cp-line);
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
}

.cp-nav-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cp-nav-inner::-webkit-scrollbar {
    display: none;
}

.cp-nav a {
    position: relative;
    flex: 0 0 auto;
    padding: 17px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cp-muted);
    white-space: nowrap;
}

.cp-nav a::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: transparent;
}

.cp-nav a:hover {
    color: var(--cp-green);
}

.cp-nav a.is-active {
    color: var(--cp-green);
}

.cp-nav a.is-active::after {
    background-color: var(--cp-green);
}

.cp-nav-count {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #9aada4;
}

/* =================================================================== body */

.cp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    align-items: start;
    gap: 26px;
    padding-top: 34px;
    padding-bottom: 72px;
}

.cp-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.cp-rail {
    position: sticky;
    top: calc(var(--cp-header) + 70px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Anchors sit under the sticky nav unless the scroll target is offset. */
.cp-section {
    scroll-margin-top: calc(var(--cp-header) + 76px);
}

.cp-card {
    padding: 28px;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    background-color: #fff;
    box-shadow: var(--cp-shadow-sm);
}

.cp-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin-bottom: 18px;
}

.cp-card h2 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cp-green);
}

.cp-card h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cp-green);
}

.cp-card-note {
    font-size: 13.5px;
    color: var(--cp-muted);
}

.cp-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-green);
}

.cp-textlink:hover {
    color: var(--cp-green-hover);
    text-decoration: underline;
}

.cp-prose {
    margin: 0;
    font-size: 15px;
    line-height: 1.72;
    color: #44554c;
    white-space: pre-line;
}

.cp-prose.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cp-readmore {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-green);
    cursor: pointer;
}

.cp-readmore:hover {
    text-decoration: underline;
}

/* pro-profile.js adds this when the clamp is not actually cutting anything off
   at the current width, so the toggle does not offer to reveal nothing. */
.cp-section.is-fits .cp-readmore {
    display: none;
}

.cp-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border: 1px dashed var(--cp-line-strong);
    border-radius: 14px;
    background-color: var(--cp-tint);
    font-size: 14px;
    color: var(--cp-muted);
}

.cp-empty i {
    font-size: 16px;
    color: #9aada4;
}

/* -------------------------------------------------------------- trust row */

.cp-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 12px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--cp-line);
}

.cp-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background-color: var(--cp-tint);
    font-size: 14px;
    color: var(--cp-green-mid);
}

.cp-trust-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cp-green);
}

.cp-trust-text span {
    font-size: 12.5px;
    color: var(--cp-muted);
}

/* ---------------------------------------------------------------- chip sets */

.cp-group + .cp-group {
    margin-top: 22px;
}

.cp-group-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.cp-group-label i {
    font-size: 12px;
    color: #9aada4;
}

.cp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--cp-line);
    border-radius: 999px;
    background-color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cp-green);
}

.cp-chip--tint {
    border-color: transparent;
    background-color: var(--cp-tint);
}

.cp-chip--accent {
    border-color: transparent;
    background-color: var(--cp-sage);
    color: var(--cp-green);
}

a.cp-chip:hover {
    border-color: var(--cp-green);
    background-color: var(--cp-green);
    color: #fff;
}

a.cp-chip i {
    font-size: 11px;
    opacity: 0.6;
}

/* An area served links to the directory search for it; its type sits after the name. */
.cp-area .loc-type {
    padding: 1px 8px;
    font-size: 10.5px;
}

a.cp-area:hover .loc-type {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.cp-coverage {
    margin-top: 16px;
}

/* ------------------------------------------------------- highlight tooltips */

/* A highlight with a description shows it on hover and keyboard focus. Touch
   screens have no hover, so pro-profile.js toggles .is-open on a tap, and
   Escape adds .is-dismissed to put it away without moving focus. */
.cp-tip {
    position: relative;
    display: inline-flex;
}

.cp-tip-trigger {
    font-family: inherit;
    line-height: inherit;
    cursor: help;
}

.cp-tip-trigger i {
    font-size: 12px;
    opacity: 0.6;
}

.cp-tip-trigger:focus-visible {
    outline: 3px solid var(--cp-green);
    outline-offset: 2px;
}

.cp-tip-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    z-index: 30;
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: 10px 13px;
    border-radius: 10px;
    background-color: var(--cp-green-deep);
    box-shadow: 0 12px 30px rgba(14, 42, 31, 0.25);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--tip-shift, 0px)), 4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}

.cp-tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - var(--tip-shift, 0px));
    border: 7px solid transparent;
    border-top-color: var(--cp-green-deep);
    transform: translateX(-50%);
}

/* Lets the pointer cross the gap to the bubble without it closing. */
.cp-tip-bubble::before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 12px;
}

.cp-tip:hover .cp-tip-bubble,
.cp-tip-trigger:focus-visible + .cp-tip-bubble,
.cp-tip.is-open .cp-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
    pointer-events: auto;
}

.cp-tip.is-dismissed .cp-tip-bubble {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ----------------------------------------------------------------- gallery */

.cp-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cp-shot {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--cp-tint);
    aspect-ratio: 1 / 1;
}

/* The first project photo leads the grid; the four beside it complete two rows
   exactly, so the collapsed gallery never ends on a half-empty row. */
.cp-shot--lead {
    grid-column: span 2;
    grid-row: span 2;
}

.cp-gallery:not(.is-expanded) .cp-shot:nth-child(n + 6) {
    display: none;
}

/* Expanded, the tiles are laid out as justified rows: the lead tile drops back
   to normal size and the last row stretches to the full width, so an arbitrary
   photo count cannot leave a hole in the grid. */
.cp-gallery.is-expanded {
    display: flex;
    flex-wrap: wrap;
}

.cp-gallery.is-expanded .cp-shot {
    flex: 1 1 190px;
    height: 190px;
    aspect-ratio: auto;
}

.cp-gallery.is-expanded .cp-shot--lead {
    grid-column: auto;
    grid-row: auto;
}

.cp-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cp-shot:hover img {
    transform: scale(1.05);
}

.cp-shot-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 26px 14px 12px;
    background: linear-gradient(to top, rgba(8, 26, 19, 0.82), rgba(8, 26, 19, 0));
    font-size: 12.5px;
    line-height: 1.4;
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cp-shot:hover .cp-shot-caption,
.cp-shot:focus-visible .cp-shot-caption {
    opacity: 1;
}

.cp-shot--lead .cp-shot-caption {
    padding: 34px 18px 16px;
    font-size: 14px;
}

/* ----------------------------------------------------------------- reviews */

.cp-review-summary {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 22px;
    border-radius: 14px;
    background-color: var(--cp-tint);
}

.cp-review-score {
    text-align: center;
}

.cp-review-score strong {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--cp-green);
}

.cp-review-score .cp-stars {
    margin: 10px 0 6px;
}

.cp-review-count {
    display: block;
    font-size: 13px;
    color: var(--cp-muted);
}

.cp-review-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cp-review-bar {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--cp-muted);
}

.cp-review-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cp-green);
}

.cp-review-bar-label i {
    font-size: 10px;
    color: var(--cp-star);
}

.cp-review-bar-track {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background-color: rgba(21, 58, 43, 0.1);
}

.cp-review-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--cp-star);
}

.cp-review-bar-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cp-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.cp-review-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.cp-review {
    padding: 20px 0;
    border-top: 1px solid var(--cp-line);
}

.cp-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--cp-green);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.cp-review-who {
    flex: 1 1 200px;
    min-width: 0;
}

.cp-review-who strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cp-green);
}

.cp-review-who time {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--cp-muted);
}

.cp-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: rgba(21, 58, 43, 0.07);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cp-green-mid);
}

.cp-verified i {
    font-size: 10px;
}

.cp-review-text {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: #44554c;
}

/* Company responses start folded so the customer reviews read first. */
.cp-reply {
    margin-top: 12px;
}

.cp-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--cp-line-strong);
    border-radius: 999px;
    background-color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cp-green);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cp-reply-toggle:hover {
    border-color: var(--cp-green);
    background-color: var(--cp-sage);
}

.cp-reply-toggle:focus-visible {
    outline: 3px solid var(--cp-green);
    outline-offset: 2px;
}

.cp-reply-toggle .fa-reply {
    font-size: 12px;
}

.cp-reply-chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.cp-reply.is-open .cp-reply-chevron {
    transform: rotate(180deg);
}

.cp-review-reply[hidden] {
    display: none;
}

.cp-review-reply {
    margin-top: 14px;
    padding: 14px 16px;
    border-left: 3px solid var(--cp-green);
    border-radius: 0 12px 12px 0;
    background-color: var(--cp-tint);
}

.cp-review-reply strong {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
    color: var(--cp-green);
}

.cp-review-reply time {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cp-muted);
}

.cp-review-reply p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: #44554c;
}

/* -------------------------------------------------------------------- map */

.cp-map {
    overflow: hidden;
    border: 1px solid var(--cp-line);
    border-radius: 14px;
}

.cp-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.cp-map-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-size: 14.5px;
    color: var(--cp-muted);
}

/* -------------------------------------------------------------------- rail */

.cp-rail-card {
    padding: 22px;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    background-color: #fff;
    box-shadow: var(--cp-shadow-sm);
}

.cp-rail-card h3 {
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cp-green);
}

.cp-rail-cta {
    padding: 24px;
    border: 0;
    border-radius: var(--cp-radius);
    background-color: var(--cp-green);
    background-image: linear-gradient(150deg, #153a2b 0%, #0e2a1f 100%);
    color: #fff;
    box-shadow: var(--cp-shadow);
}

.cp-rail-cta h3 {
    margin: 14px 0 8px;
    font-size: 1.16rem;
    font-weight: 700;
    color: #fff;
}

.cp-rail-cta p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
}

.cp-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: rgba(247, 244, 237, 0.16);
    font-size: 16px;
    color: var(--cp-ivory);
}

.cp-rail-cta small {
    display: block;
    margin-top: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.58);
}

.cp-facts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-facts li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--cp-line);
}

.cp-facts li:first-child {
    border-top: 0;
    padding-top: 0;
}

.cp-facts-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background-color: var(--cp-tint);
    font-size: 14px;
    color: var(--cp-green-mid);
}

.cp-facts-body {
    min-width: 0;
}

.cp-facts-body strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.cp-facts-body span,
.cp-facts-body a {
    display: block;
    margin-top: 3px;
    font-size: 14.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    color: var(--cp-green);
}

.cp-facts-body a:hover {
    color: var(--cp-green-hover);
    text-decoration: underline;
}

.cp-facts-body small {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--cp-muted);
}

.cp-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cp-line);
}

.cp-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--cp-tint);
    font-size: 15px;
    color: var(--cp-green);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cp-social:hover {
    background-color: var(--cp-green);
    color: #fff;
}

.cp-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

/* -------------------------------------------------------------- mobile bar */

.cp-actionbar {
    display: none;
}

/* ------------------------------------------------------------------ modals */

.cp .modal-content {
    border: 0;
    border-radius: 18px;
}

.cp .modal-header {
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cp-line);
}

.cp .modal-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--cp-green);
}

.cp .modal-body {
    padding: 8px 24px 24px;
}

.cp .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--cp-line);
}

.cp-modal-reviews .cp-review:first-child {
    border-top: 0;
    padding-top: 12px;
}

/* ================================================================ responsive */

@media (max-width: 1199.98px) {
    .cp-body {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .cp-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .cp-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-rail {
        position: static;
    }

    .cp-review-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .cp-review-score {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
    }

    .cp-review-score strong {
        font-size: 2.4rem;
    }

    .cp-review-score .cp-stars {
        margin: 0;
    }
}

@media (max-width: 767.98px) {
    .cp-shell {
        padding: 0 16px;
    }

    .cp-hero {
        padding: 118px 0 28px;
    }

    .cp-identity {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 16px;
    }

    .cp-logo {
        width: 76px;
        height: 76px;
        padding: 7px;
        border-radius: 16px;
    }

    .cp-logo-initials {
        font-size: 1.4rem;
    }

    .cp-hero-facts {
        gap: 6px 14px;
        font-size: 13.5px;
    }

    /* Phones get the two actions that matter in a fixed bar instead, so the
       hero keeps the share menu only. */
    .cp-hero-actions .cp-btn--call,
    .cp-hero-actions .cp-btn--quote {
        display: none;
    }

    .cp-card,
    .cp-rail-card {
        padding: 20px;
    }

    .cp-body {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .cp-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cp-shot--lead {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }

    .cp-shot-caption {
        opacity: 1;
    }

    .cp-map iframe {
        height: 300px;
    }

    .cp-review-actions .cp-btn {
        flex: 1 1 100%;
    }

    .cp-nav a {
        padding: 15px 12px;
        font-size: 14px;
    }

    .cp-nav a::after {
        right: 12px;
        left: 12px;
    }

    .cp-actionbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1029;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--cp-line);
        background-color: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        box-shadow: 0 -8px 24px rgba(14, 42, 31, 0.1);
    }

    .cp-actionbar .cp-btn {
        padding: 13px 10px;
    }

    /* The bar is fixed, so the document needs room underneath or the last line of
       the footer sits behind it. The padding has to go on the element that ends
       the page, which is outside this component; :has() keeps the rule from
       reaching other pages if the stylesheet outlives the profile. */
    body:has(.cp) {
        padding-bottom: 84px;
    }
}

@media (max-width: 575.98px) {
    .cp-trust {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-review-bar {
        grid-template-columns: 52px minmax(0, 1fr) 24px;
        gap: 8px;
    }
}

@media (max-width: 575.98px) {
    .cp-reply-toggle {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-tip-bubble,
    .cp-reply-toggle,
    .cp-reply-chevron,
    .cp-btn,
    .cp-chip,
    .cp-social,
    .cp-shot img,
    .cp-shot-caption {
        transition: none;
    }

    .cp-shot:hover img {
        transform: none;
    }
}