/* ============================================================================
* company-profile-v2.css — redesigned /company/{slug} page (2026-08).
*
* NEW stylesheet for the full company-detail redesign (Figma node 10853-70174).
* Deliberately NOT edits to profile-new.css: that file uses legacy utility
* classes + pseudo-element button labels. This file is self-contained and
* everything is scoped under the `.cp2` root wrapper with `cp2-` class names,
* so it can coexist with the old page during the build without collisions.
*
* Loaded (cache-busted) from src/app/company/[slug]/layout.tsx.
* ⚠️ BUMP ?v ON EVERY EDIT — /static/css/* is edge-cached under a stable URL.
* ========================================================================== */
.cp2 {
/* ── design tokens ─────────────────────────────────────────────────── */
--cp-ink: #171923; /* primary near-black */
--cp-muted: #444b55; /* secondary text */
--cp-muted-2: #5b6472;
--cp-gold: #c5a063; /* brand gold */
--cp-gold-soft: #fdf6e9; /* cream */
--cp-line: #dbdbdb; /* hairline border */
--cp-fill: #ececec; /* light card fill */
--cp-paper: #ffffff;
--cp-link: #1a56b0;
--cp-green: #2cae45;
--cp-green-soft: rgba(44, 174, 69, 0.1);
--cp-green-line: #3ebe69;
--cp-green-fill: #e1fbea;
--cp-r-sm: 6px;
--cp-r-md: 10px;
--cp-r-lg: 16px;
--cp-r-pill: 100px;
--cp-shell: 1340px; /* content max width (Figma 900 main + 400 side + 40 gap) */
/* Sidebar width — fluid so the Visit Website card shrinks as the viewport
narrows (Figma max 400px). Because the page-grid margins sit at their 24px
min until `main` reaches its cap, the width the sidebar gives up flows into
`main`, which keeps the portfolio at 3 columns down to ~1200px. */
--cp-side: clamp(300px, 30vw, 400px);
--cp-gap: 40px;
color: var(--cp-ink);
font-family: "Roboto", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
background: var(--cp-paper);
}
.cp2 *,
.cp2 *::before,
.cp2 *::after { box-sizing: border-box; }
.cp2 img { max-width: 100%; }
/* Smooth in-page anchor jumps (tab nav, sidebar "View" → #verification, etc.).
This stylesheet only loads on the company-detail page, so it stays scoped
here. `.cp2-section` carries scroll-margin-top for the sticky tab bar. */
html { scroll-behavior: smooth; }
/* container / layout shell ------------------------------------------------ */
.cp2-wrap {
width: 100%;
max-width: var(--cp-shell);
margin: 0 auto;
padding: 0 24px;
}
/* Full-bleed content grid (Figma). Named lines: `full` spans the whole viewport,
`main` is the centred content column (capped at --cp-shell), `side` is the
sidebar. The dark hero band (.cp2-heroband) is an empty item on `full`/row1
that stretches to the hero's height and reaches both viewport edges — no
100vw, so a scrollbar can never scroll the page sideways. The sticky sidebar
spans rows 1-2 so it OVERLAPS the hero band on the right. */
.cp2-page {
display: grid;
grid-template-columns:
[full-start] minmax(24px, 1fr)
[main-start] minmax(0, calc(var(--cp-shell) - var(--cp-side) - var(--cp-gap)))
[main-end] var(--cp-gap)
[side-start] var(--cp-side)
[side-end] minmax(24px, 1fr)
[full-end];
/* Space below the grid so the sticky sidebar can never bottom out flush
against the global footer. */
padding-bottom: 60px;
}
.cp2-heroband {
grid-column: full-start / full-end;
grid-row: 1;
background: var(--cp-ink);
}
.cp2-main {
grid-column: main-start / main-end;
grid-row: 2;
min-width: 0;
display: flex;
flex-direction: column;
gap: 50px;
padding: 50px 0 20px;
}
.cp2-aside {
grid-column: side-start / side-end;
grid-row: 1 / span 2;
align-self: start;
position: sticky;
top: 96px;
margin-top: 40px; /* start a little below the hero top so it overlaps the band */
z-index: 1;
}
/* ── Mobile section accordion (<768px) ──────────────────────────────────────
Above 768px this is inert: the header is hidden and the panel always shows,
so sections render exactly as the desktop layout. Below 768px the sticky
TabNav is hidden and each section collapses behind a tappable header (its
title + chevron), all collapsed by default. The section's own eyebrow + h2
(.cp2-shead) is hidden on mobile so the title isn't shown twice. */
.cp2-acc-head { display: none; }
.cp2-acc-panel { display: block; }
@media (max-width: 767px) {
.cp2-tabnav { display: none; }
/* Accordion rows stack flush (their own border-bottom is the divider). The
`.cp2` prefix out-specifies the later responsive `.cp2-main { gap: 40px }`
so the 40px flex gap between items is removed on mobile. */
.cp2 .cp2-main { gap: 0; padding: 24px 0 0; }
.cp2-acc { background: var(--cp-paper); border-bottom: 1px solid var(--cp-line); }
.cp2-acc:first-child { border-top: 1px solid var(--cp-line); }
/* No trailing divider or dead space under the last section before the footer. */
.cp2-acc:last-child { border-bottom: none; }
.cp2-acc:last-child .cp2-acc-panel { padding-bottom: 4px; }
/* The page grid carries a 60px bottom padding for desktop breathing room —
drop it on mobile so a collapsed last fold sits flush above the footer. */
.cp2 .cp2-page { padding-bottom: 0; }
.cp2-acc-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 20px 4px; background: none; border: 0; cursor: pointer;
text-align: left; font-family: inherit;
}
.cp2-acc-title {
font-family: "Manrope", "Roboto", sans-serif; font-size: 18px; font-weight: 700;
line-height: 1.3; color: var(--cp-ink);
}
.cp2-acc-chevron {
display: inline-flex; flex: 0 0 auto; color: var(--cp-muted);
transition: transform 0.2s ease;
}
.cp2-acc.is-open .cp2-acc-chevron { transform: rotate(180deg); }
.cp2-acc-panel { display: none; padding: 0 4px 24px; }
.cp2-acc.is-open .cp2-acc-panel { display: block; }
/* Section's own eyebrow + title is replaced by the accordion header. */
.cp2-acc .cp2-shead { display: none; }
}
/* shared typographic bits ------------------------------------------------- */
.cp2-eyebrow {
color: var(--cp-gold);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 10px;
}
/* Desktop (>1024px): H1 48 · H2 32 · H3 22 (Figma). Tablet + mobile scales are
in the responsive section at the foot of this file. */
.cp2-h2 {
font-family: "Manrope", "Roboto", sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin: 0;
color: var(--cp-ink);
overflow-wrap: anywhere;
}
.cp2-h3 {
font-size: 22px;
font-weight: 600;
line-height: 1.35;
margin: 0;
color: var(--cp-ink);
overflow-wrap: anywhere;
}
.cp2-sub { color: var(--cp-muted); font-size: 18px; line-height: 1.6; margin: 14px 0 0; }
.cp2-section { scroll-margin-top: 96px; }
.cp2-section + .cp2-section { }
.cp2-divider { border: 0; border-top: 1px solid var(--cp-line); margin: 0; }
/* buttons ----------------------------------------------------------------- */
.cp2-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
padding: 12px 23px; border-radius: var(--cp-r-sm); cursor: pointer;
border: 1px solid transparent; text-decoration: none; transition: all .18s ease;
}
.cp2-btn--gold { background: var(--cp-gold); color: var(--cp-ink); }
/* color is pinned on hover/focus/active too — common.css has global
`a:hover,a:focus{color:gold}` that would otherwise turn these gold
buttons' text gold-on-gold (invisible), including the focus a link KEEPS
after being clicked. */
.cp2-btn--gold:hover,
.cp2-btn--gold:focus,
.cp2-btn--gold:focus-visible,
.cp2-btn--gold:active { color: var(--cp-ink); }
.cp2-btn--gold:hover { filter: brightness(0.96); }
.cp2-btn--dark { background: var(--cp-ink); color: #fff; border-color: #fff; }
.cp2-btn--dark:hover { filter: brightness(1.15); }
.cp2-btn--outline { background: #fff; color: var(--cp-ink); border-color: var(--cp-ink); }
/* Pin the colour through focus/active for the same reason the gold buttons do:
common.css has a global `a:focus,a:hover{color:var(--secondary)}` (gold), and
`a:focus` (0,1,1) outranks `.cp2-btn--outline` (0,1,0). The focus an
KEEPS after being clicked therefore left the label gold-on-white.
Latent until now - every other --outline user (ReadMoreV2, InterviewCardV2,
Contact Now) is a , which never matches `a:focus`. "Schedule a Call"
(2026-09-14) is the first anchor to use the variant.
ORDER MATTERS: :hover must come AFTER these. Both selectors are (0,2,0), so
source order decides when a link is hovered AND focused - with :focus last,
the label would be pinned dark on the dark hover background, i.e. invisible. */
.cp2-btn--outline:focus,
.cp2-btn--outline:focus-visible,
.cp2-btn--outline:active { color: var(--cp-ink); }
.cp2-btn--outline:hover { background: var(--cp-ink); color: #fff; }
.cp2-btn--block { width: 100%; }
.cp2-btn--lg { font-size: 18px; padding: 16px 23px; }
.cp2-textlink {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cp-gold); font-weight: 600; font-size: 16px;
background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.cp2-textlink:hover { text-decoration: underline; }
/* chips / pills ----------------------------------------------------------- */
.cp2-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 15px; border-radius: var(--cp-r-pill);
background: var(--cp-fill); border: 1px solid var(--cp-line);
font-size: 14px; color: var(--cp-muted);
}
.cp2-chip b { color: var(--cp-ink); font-size: 16px; font-weight: 600; }
.cp2-chip-pin { display: inline-flex; align-items: center; color: var(--cp-gold); }
.cp2-chip--plain { background: var(--cp-fill); border: 1px solid var(--cp-line); border-radius: var(--cp-r-pill); padding: 3px 10px; font-size: 14px; color: var(--cp-ink); }
/* star rating ------------------------------------------------------------- */
/* SVG star rating — a grey base row with a gold row clipped to the rating
width on top. Stars are 1em so they scale with the context font-size. */
.cp2-stars { position: relative; display: inline-flex; line-height: 0; font-size: 14px; }
.cp2-stars-row { display: inline-flex; gap: 0.14em; }
.cp2-star { width: 1em; height: 1em; display: block; flex: 0 0 auto; }
.cp2-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
/* eyebrow+title header block ---------------------------------------------- */
.cp2-shead { display: flex; flex-direction: column; }
/* generic card ------------------------------------------------------------ */
.cp2-card {
background: var(--cp-paper);
border: 1px solid var(--cp-line);
border-radius: var(--cp-r-md);
padding: 25px;
}
.cp2-card--fill { background: var(--cp-fill); }
/* ══════════════════════════════════════════════════════════════════════════
* HERO (dark band)
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-hero {
grid-column: main-start / main-end;
grid-row: 1;
position: relative;
color: #fff;
padding: 70px 0;
display: flex; flex-direction: column; gap: 30px;
}
/* logo + name only (name centred beside the logo) */
.cp2-hero-top { display: flex; align-items: center; gap: 20px; }
.cp2-hero-logo {
/* 75px -> 50px (2026-09-11, stakeholder). Independent of
.cp2-side-brand-logo (44px) - the comment there only shares object-fit. */
width: 50px; height: 50px; flex: 0 0 auto; border-radius: var(--cp-r-sm);
border: 1px solid var(--cp-line); background: #fff; object-fit: contain;
}
/* tagline + rating + meta — full width, starts below the logo/name row */
.cp2-hero-info { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cp2-hero-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cp2-hero-title { font-family: "Manrope", sans-serif; font-size: 36px; font-weight: 800; line-height: 1.05; margin: 0; color: #fff; overflow-wrap: anywhere; }
.cp2-hero-tagline { color: #fff; font-size: 30px; line-height: 1.8; opacity: .92; }
.cp2-badge-verified {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 8px; border-radius: var(--cp-r-pill);
background: var(--cp-green-fill); border: 1px solid var(--cp-green-line);
color: var(--cp-green-line); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.cp2-badge-verified::before { content: "✓"; font-weight: 700; }
.cp2-hero-ratingrow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cp2-hero-ratingrow .cp2-stars { font-size: 16px; }
.cp2-hero-ratingnum { color: #fff; font-size: 18px; font-weight: 600; }
.cp2-hero-sep { width: 1px; height: 18px; background: rgba(255,255,255,.25); }
.cp2-hero-writelink { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-gold); font-weight: 600; font-size: 16px; text-decoration: none; }
.cp2-hero-writelink svg { flex: 0 0 auto; }
.cp2-hero-writelink:hover { text-decoration: underline; }
/* Single star shown only on mobile (5-star bar hidden there) — see mobile block. */
.cp2-hero-star1 { display: none; align-items: center; line-height: 0; color: var(--cp-gold); }
.cp2-hero-meta { display: flex; flex-wrap: wrap; gap: 15px; }
.cp2-hero-meta .cp2-chip { background: var(--cp-fill); }
/* Mobile-only meta grid (icon + stacked value/label, 2 per row) — hidden on
desktop; the mobile block below swaps it in for the pill chips at <768px. */
.cp2-hero-metagrid { display: none; }
.cp2-hero-programs { display: flex; flex-wrap: wrap; gap: 40px; }
.cp2-hero-prog { display: flex; flex-direction: column; gap: 14px; }
.cp2-hero-prog + .cp2-hero-prog { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.15); }
.cp2-hero-prog-label { color: var(--cp-gold); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
.cp2-hero-prog-logos { display: flex; flex-wrap: wrap; gap: 20px; }
.cp2-hero-prog-logos img { width: 44px; height: 44px; border-radius: var(--cp-r-sm); border: 1px solid var(--cp-line); background: #fff; object-fit: contain; }
/* ══════════════════════════════════════════════════════════════════════════
* STICKY TAB NAV
* ═════════════════════════════════════════════════════════════════════════ */
/* z-index 9 sits above the page content the sticky bar scrolls over (hero band,
sidebar z-index 1) but BELOW the global header's stacking context (.gf-hv2-header,
z-index 10) so the header's Discover/Resources dropdown panels open ABOVE this
bar instead of being covered by it. */
.cp2-tabnav { position: sticky; top: 0; z-index: 9; background: #fff; border-bottom: 1px solid var(--cp-line); }
.cp2-tabnav-row { display: flex; align-items: center; gap: 12px; }
.cp2-tabnav-inner { display: flex; flex: 1 1 auto; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cp2-tabnav-inner::-webkit-scrollbar { display: none; }
/* Compact Visit Website CTA in the sticky bar — hidden on desktop (the sidebar
CTA is sticky there); revealed <=1024px in the media block below. */
/* Sidebar CTA row: Contact Now + Schedule a Call sit side by side under
Visit Website (design 2026-09-14). Children are `flex: 1 1 0` so the width
split is DERIVED - two buttons take half each either side of the gap, and a
lone button (contact form off, or Schedule a Call off) fills the row. That
is one rule covering all three combinations instead of a width per case. */
.cp2-side-ctarow { display: flex; align-items: stretch; gap: 10px; }
.cp2-side-ctarow > .cp2-btn { flex: 1 1 0; min-width: 0; }
/* The pair is narrower than a full-width button, so ease off the --lg padding
and let long labels shrink rather than overflow the card. */
.cp2-side-ctarow > .cp2-btn--lg { padding: 14px 12px; font-size: 16px; white-space: nowrap; }
.cp2-tabnav .cp2-tabnav-cta { display: none; flex: 0 0 auto; }
.cp2-tab {
appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
padding: 16px 25px; font-size: 16px; font-weight: 500; color: var(--cp-ink);
white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none;
}
.cp2-tab:hover { color: var(--cp-gold); }
.cp2-tab.is-active { color: var(--cp-gold); border-bottom-color: var(--cp-gold); }
/* content wrapper below hero --------------------------------------------- */
.cp2-body { padding: 50px 0; }
/* ══════════════════════════════════════════════════════════════════════════
* ABOUT / OVERVIEW
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-about-text { color: var(--cp-ink); font-size: 16px; line-height: 1.7; }
.cp2-about-text p { margin: 0 0 20px; }
.cp2-about-text p:last-child { margin-bottom: 0; }
/* Summary lists: common.css strips list markers globally, so restore them as a
gold chevron (mirrors the legacy `.profile-summary ul li::before` marker,
recoloured to the v2 gold accent). */
.cp2-about-text ul,
.cp2-about-text ol { margin: 0 0 20px; padding: 0; }
.cp2-about-text ul:last-child,
.cp2-about-text ol:last-child { margin-bottom: 0; }
.cp2-about-text ul li,
.cp2-about-text ol li { position: relative; padding-left: 22px; margin-bottom: 10px; list-style: none; }
.cp2-about-text ul li:last-child,
.cp2-about-text ol li:last-child { margin-bottom: 0; }
.cp2-about-text ul li::before,
.cp2-about-text ol li::before {
content: "";
position: absolute; left: 3px; top: 0.5em;
width: 7px; height: 11px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11' fill='none'%3E%3Cpath fill='%23c5a063' d='m0 10.801 7-5-7-5 2.555 5z'/%3E%3C/svg%3E") no-repeat left center;
}
/* summary-truncate marks overflow elements with class="hide". These stay
hidden while collapsed and reveal on "Read more".
⚠️ common.css (loaded on this page) defines `.hide { display:none !important }`.
Because the v2 clamp toggles a parent class rather than stripping `.hide` off
each child (as the v1 button does), that global !important would keep the
overflow hidden even when expanded — making the button a no-op. So the
expanded state must override it with equal weight. `revert` restores each
element's normal (UA) display, correct for the block/list/inline mix. */
.cp2-about-text .hide { display: none !important; }
.cp2-about-text:not(.cp2-collapsed) .hide { display: revert !important; }
/* When collapsed the real last child is a hidden `.hide` block, so the last
VISIBLE block keeps its 20px bottom margin and opens a gap above the toggle.
Drop that trailing margin on the visible block right before the hidden run. */
.cp2-about-text.cp2-collapsed > *:has(+ .hide) { margin-bottom: 0; }
/* Social-media row — shown with the About summary. Icons match the legacy
profile exactly (24px brand glyphs on a white rounded square), ported from
`profile-new.css` `.social-media-icon` / `.icon-*` since the v2 route does
not load that stylesheet. --primary / --white / --border-radius come from
common.css. */
.cp2-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.cp2-social .social-media-icon {
width: 24px; height: 24px; flex: 0 0 auto;
background-color: var(--primary); border-radius: var(--border-radius);
transition: opacity 0.16s ease;
}
.cp2-social .social-media-icon:hover,
.cp2-social .social-media-icon:focus-visible { opacity: 0.82; }
.cp2-social .social-media-icon::after {
content: ""; display: block; width: 100%; height: 100%;
background-color: var(--white);
background-repeat: no-repeat; background-position: center center;
}
.cp2-social .icon-facebook::after {
background-image: url('data:image/svg+xml, for the reviews Services / Sort By / mention-theme controls. No
`display` on the base so `.cp2-keychip-select { display:none }` still hides the
mobile mention dropdown on desktop. */
.cp2-dd { position: relative; }
.cp2-dd-btn {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
min-width: 150px; max-width: 260px; padding: 10px 12px; border-radius: 4px;
border: 1px solid var(--cp-line); background: #fff; color: var(--cp-ink);
font-family: inherit; font-size: 14px; cursor: pointer; text-align: left;
transition: border-color 0.16s ease;
}
.cp2-dd-btn:hover { border-color: var(--cp-gold); }
.cp2-dd-btn:focus-visible { outline: none; border-color: var(--cp-gold); }
.cp2-dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp2-dd-caret { display: inline-flex; flex: 0 0 auto; color: var(--cp-muted); transition: transform 0.18s ease; }
.cp2-dd.is-open .cp2-dd-caret { transform: rotate(180deg); }
.cp2-dd-list {
position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%;
max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-r-sm);
box-shadow: 0 12px 30px rgba(23, 25, 35, 0.14); display: none;
}
.cp2-dd.is-open .cp2-dd-list { display: block; }
.cp2-dd-list::-webkit-scrollbar { width: 8px; }
.cp2-dd-list::-webkit-scrollbar-thumb { background: var(--cp-gold); border-radius: 20px; }
.cp2-dd-opt {
display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0;
background: none; font-family: inherit; font-size: 14px; color: var(--cp-ink);
cursor: pointer; border-radius: 4px; white-space: nowrap;
}
.cp2-dd-opt:hover { background: var(--cp-fill); }
.cp2-dd-opt.is-checked { background: var(--cp-gold-soft); font-weight: 600; }
/* Optional in-popup filter box (searchable Cp2Select — e.g. the country list).
* Sticky at the top of the scrolling list so it stays visible while scrolling. */
.cp2-dd-searchli { position: sticky; top: 0; z-index: 1; background: #fff; padding: 0 0 6px; }
.cp2-dd-search { width: 100%; border: 1px solid var(--cp-line); border-radius: 4px; padding: 8px 10px; font-family: inherit; font-size: 14px; color: var(--cp-ink); outline: none; }
.cp2-dd-search:focus { border-color: var(--cp-gold); }
.cp2-dd-empty { padding: 9px 10px; color: var(--cp-muted); font-size: 14px; }
/* Services dropdown: cap the button so a long category label can't blow it out. */
.cp2-review-filterbar > .cp2-select-wrap .cp2-dd-btn { max-width: 200px; }
/* Reviews + Portfolio pager. The shared listing pager (.pagination-wrapper)
ships 50px top/bottom padding for full-width listing pages; inside the
company sections the container gap already spaces it, so trim to a small
top padding and let the section rhythm handle the rest. */
.cp2-pager .pagination-wrapper { padding: 6px 0 0; }
/* The pager tiles are transparent s (they look white on the white listing
pages, but grey here on the grey reviews/portfolio card) — force a white tile
background, keeping the active page dark. */
.cp2-pager .pagination-wrapper ul li { background: #fff; }
.cp2-pager .pagination-wrapper ul li.active { background: var(--cp-ink); }
/* Review keyword search (Figma) — a full-width rounded field with a gold search
glyph. Sits between the "Detailed Reviews" title and the Services/Sort row. */
.cp2-review-search { position: relative; display: flex; align-items: center; width: 100%; }
.cp2-review-search-icon { position: absolute; left: 20px; display: inline-flex; color: var(--cp-gold); pointer-events: none; }
.cp2-review-search-input {
width: 100%; padding: 14px 20px 14px 52px; border: 1px solid var(--cp-line);
border-radius: var(--cp-r-pill); font-family: inherit; font-size: 16px; color: var(--cp-ink);
background: #fff; outline: none;
}
.cp2-review-search-input::placeholder { color: var(--cp-muted); }
.cp2-review-search-input:focus-visible { border-color: var(--cp-gold); }
/* Match-count badge on the right of the search bar — only rendered once a
* keyword search is applied (`.has-count`); reserve room so the typed text
* never runs under it. */
.cp2-review-search.has-count .cp2-review-search-input { padding-right: 96px; }
.cp2-review-search-count {
position: absolute; right: 20px; display: inline-flex; align-items: center;
font-size: 14px; font-weight: 600; color: var(--cp-muted); white-space: nowrap;
pointer-events: none;
}
/* individual review card */
.cp2-review { display: flex; flex-direction: column; background: var(--cp-paper); border: 1px solid var(--cp-line); border-radius: var(--cp-r-md); overflow: hidden; }
.cp2-review-head { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.cp2-review-headrow { display: flex; align-items: flex-start; gap: 16px; }
.cp2-review-avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: #d9d9d9; object-fit: cover; }
/* Fallback circle with the reviewer's initial when the photo is missing/404s. */
.cp2-review-avatar--ph { display: grid; place-items: center; background: var(--cp-gold-soft); color: var(--cp-gold); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 16px; line-height: 1; }
.cp2-review-who { flex: 1 1 0; min-width: 0; }
.cp2-review-name { color: var(--cp-ink); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cp2-review-date { color: var(--cp-muted); font-size: 14px; margin-top: 2px; }
/* Green "Verified Review" pill (Figma) */
.cp2-review-verified { display: inline-flex; align-items: center; gap: 4px; background: #e1fbea; color: #2f9d57; border: 0.7px solid #3ebe69; border-radius: var(--cp-r-pill); padding: 2px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; }
/* Share button, top-right of the card head */
.cp2-review-share { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border: 1px solid var(--cp-line); border-radius: 8px; color: var(--cp-muted); cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease; }
.cp2-review-share:hover { border-color: var(--cp-gold); color: var(--cp-gold); }
.cp2-review-share-copied { font-size: 11px; font-weight: 600; color: var(--cp-green); }
/* Share-review popup (copy link + social) */
.cp2-share-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(23, 25, 35, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cp2-share-modal { position: relative; background: var(--cp-paper); border-radius: var(--cp-r-lg); width: min(520px, 100%); padding: 44px 30px 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.cp2-share-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--cp-paper); border: 1px solid var(--cp-line); border-radius: 50%; color: var(--cp-ink); cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease; }
.cp2-share-close:hover { border-color: var(--cp-gold); color: var(--cp-gold); }
.cp2-share-heading { font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 700; color: var(--cp-ink); }
.cp2-share-inputrow { display: flex; align-items: center; gap: 12px; width: 100%; }
.cp2-share-input { flex: 1 1 0; min-width: 0; padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: 8px; font-size: 14px; color: var(--cp-muted); background: var(--cp-fill); }
.cp2-btn.is-copied { background: var(--cp-green); border-color: var(--cp-green); color: #fff; }
.cp2-share-or { color: var(--cp-muted); font-size: 13px; font-weight: 600; }
.cp2-share-sub { color: var(--cp-muted); font-size: 14px; }
.cp2-share-socials { display: flex; gap: 16px; }
.cp2-share-chip { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; transition: transform 0.16s ease, filter 0.16s ease; }
/* Keep the glyph white on hover/focus — the icons use fill:currentColor, and
common.css has a global `a:hover,a:focus{color:gold}` that would otherwise
turn every chip's glyph gold. The brand background is kept; only brightness
lifts on hover. Same neutralisation the gold buttons above use. */
.cp2-share-chip:hover,
.cp2-share-chip:focus,
.cp2-share-chip:focus-visible,
.cp2-share-chip:active { color: #fff; }
.cp2-share-chip:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cp2-share-linkedin { background: #0a66c2; }
.cp2-share-facebook { background: #1877f2; }
.cp2-share-x { background: #000; }
.cp2-share-mail { background: var(--cp-gold); }
.cp2-review-quote { color: var(--cp-ink); font-size: 20px; font-weight: 600; line-height: 1.5; }
.cp2-review-ratingbox { padding: 20px; border-top: 1px solid var(--cp-line); display: flex; flex-wrap: wrap; gap: 30px 40px; align-items: flex-start; }
/* Overall-rating box width tracks the VIEWPORT so it shrinks as the screen
narrows and stays beside the metric bars down to ~1025px (instead of the
rigid 320px that forced the bars to wrap below it around 1129px). */
.cp2-review-overall { flex: 0 1 auto; width: clamp(180px, 22vw, 320px); max-width: 100%; background: var(--cp-gold-soft); border-radius: var(--cp-r-md); padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.cp2-review-overall-label { font-size: 18px; font-weight: 500; }
.cp2-review-overall-val { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.cp2-review-metrics { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
/* Below 1025px the page is single-column so the main column is wide; a
viewport-reduced Overall box would sit tiny next to very wide metric bars
(labels stranded far from the stars). Split the row 50/50 instead. */
@media (min-width: 768px) and (max-width: 1024px) {
/* flex-basis 0 (not 50%) so the two never sum past 100% + gap and wrap — they
grow equally to a true 50/50 side-by-side. */
.cp2-review-overall { flex: 1 1 0; width: auto; min-width: 0; }
.cp2-review-metrics { flex: 1 1 0; min-width: 0; }
}
.cp2-review-metric { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
.cp2-review-metric-val { display: flex; align-items: center; gap: 5px; }
.cp2-review-body { padding: 20px; border-top: 1px solid var(--cp-line); display: flex; flex-direction: column; gap: 20px; }
.cp2-review-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.cp2-review-text { color: var(--cp-muted); font-size: 16px; line-height: 1.5; }
/* Expandable "Project Details" (Figma 10903-83496) */
.cp2-review-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--cp-gold); }
.cp2-review-toggle:hover { text-decoration: underline; }
.cp2-review-toggle-arrow { flex: 0 0 auto; transition: transform 0.18s ease; }
.cp2-review-toggle-arrow.is-open { transform: rotate(180deg); }
.cp2-review-details { display: flex; flex-direction: column; gap: 20px; }
/* Liked most / Room to improve — grey boxes, side by side */
.cp2-review-lr { display: flex; flex-wrap: wrap; gap: 20px; }
.cp2-review-lr-box { flex: 1 1 260px; min-width: 0; padding: 15px; background: var(--cp-fill); border-radius: var(--cp-r-sm); display: flex; flex-direction: column; gap: 10px; }
.cp2-review-lr-head { display: inline-flex; align-items: center; gap: 10px; color: var(--cp-ink); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.cp2-review-lr-icon { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; }
.cp2-review-lr-icon--liked { background: rgba(47, 143, 91, 0.2); color: #2f8f5b; }
.cp2-review-lr-icon--improve { background: rgba(181, 131, 50, 0.2); color: #b58332; }
.cp2-review-lr-text { color: var(--cp-muted); font-size: 16px; line-height: 1.5; }
/* Project Cost / Industry / Status — white bordered meta card */
.cp2-review-meta { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; background: var(--cp-paper); border: 1px solid var(--cp-line); border-radius: var(--cp-r-sm); }
.cp2-review-meta-cell { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cp2-review-meta-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 5px; background: var(--cp-gold-soft); color: var(--cp-gold); display: grid; place-items: center; }
.cp2-review-meta-texts { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cp2-review-meta-label { color: var(--cp-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.cp2-review-meta-val { color: var(--cp-ink); font-size: 14px; font-weight: 600; }
/* Project name / description fields */
.cp2-review-field { display: flex; flex-direction: column; gap: 10px; }
.cp2-review-field-label { color: var(--cp-ink); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.cp2-review-field-val { color: var(--cp-muted); font-size: 16px; line-height: 1.5; }
.cp2-review-list { display: flex; flex-direction: column; gap: 20px; }
/* Empty search/filter result (the company HAS reviews, but none match the
* active keyword/service/theme). Distinct from `.cp2-empty-review`, which is
* the zero-reviews-at-all state with the big bubble glyph. */
.cp2-review-noresults { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.cp2-review-noresults-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--cp-ink); }
.cp2-review-noresults-sub { margin: 0; font-size: 14px; color: var(--cp-muted); max-width: 420px; }
/* ══════════════════════════════════════════════════════════════════════════
* AI TOOLS
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-aitools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.cp2-aitool { border: 1px solid var(--cp-line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.cp2-aitool-head { display: flex; align-items: center; gap: 12px; }
/* dark rounded badge with a white brand glyph (Figma node 10853-70435) */
.cp2-aitool-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; background: var(--cp-ink); color: #fff; border-radius: 8px; }
.cp2-aitool-icon svg { display: block; }
.cp2-aitool-name { font-size: 20px; font-weight: 600; }
.cp2-aitool-desc { color: var(--cp-muted); font-size: 16px; line-height: 1.5; }
/* ══════════════════════════════════════════════════════════════════════════
* PORTFOLIO
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.cp2-analytics-card { display: flex; flex-direction: column; }
/* flex: 1 so the top fills the equal-height (grid-stretched) card and the foot
always sits at the bottom — otherwise a shorter card (fewer legend rows)
leaves the foot floating with empty space beneath it. */
.cp2-analytics-top { flex: 1 1 auto; background: var(--cp-fill); border: 1px solid var(--cp-line); border-radius: var(--cp-r-lg) var(--cp-r-lg) 0 0; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cp2-analytics-title { font-size: 22px; font-weight: 600; }
.cp2-analytics-foot { background: var(--cp-fill); border: 1px solid var(--cp-line); border-top: 0; border-radius: 0 0 var(--cp-r-lg) var(--cp-r-lg); padding: 20px; text-align: center; }
.cp2-analytics-foot-label { color: var(--cp-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.cp2-analytics-foot-val { color: var(--cp-ink); font-size: 20px; font-weight: 600; margin-top: 6px; }
.cp2-clients-chips { display: flex; flex-wrap: wrap; gap: 15px; }
.cp2-client-chip { padding: 14px 25px; background: var(--cp-fill); border-radius: var(--cp-r-sm); color: var(--cp-muted); font-size: 18px; }
/* Always 3 across on desktop (cards shrink to fit); 2 on tablet, 1 on phones. */
.cp2-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 767px) { .cp2-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cp2-portfolio-grid { grid-template-columns: 1fr; } }
.cp2-portfolio-card { display: flex; flex-direction: column; border: 1px solid var(--cp-line); border-radius: var(--cp-r-sm); overflow: hidden; background: #fff; padding: 0; cursor: pointer; text-align: left; font-family: inherit; color: inherit; width: 100%; }
.cp2-portfolio-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cp-fill); }
.cp2-portfolio-body { padding: 14px 15px; background: var(--cp-gold-soft); display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.cp2-portfolio-tag { align-self: flex-start; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--cp-gold); background: var(--cp-gold-soft); font-size: 12px; color: var(--cp-ink); }
.cp2-portfolio-title { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; color: var(--cp-ink); }
/* margin-top:auto pins the budget/timeline row to the bottom of the card body
(flex:1 1 auto) so it sits flush across a row regardless of title length. */
.cp2-portfolio-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--cp-ink); font-size: 12px; font-weight: 400; margin-top: auto; }
.cp2-portfolio-meta > span { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; }
.cp2-pf-meta-icon { width: 17px; height: 17px; flex: 0 0 auto; }
/* Portfolio detail modal */
.cp2-pf-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(23, 25, 35, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cp2-pf-modal { position: relative; background: var(--cp-paper); border-radius: var(--cp-r-lg); width: min(760px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.cp2-pf-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--cp-paper); border: 1px solid var(--cp-line); border-radius: 50%; color: var(--cp-ink); cursor: pointer; z-index: 1; transition: border-color 0.16s ease, color 0.16s ease; }
.cp2-pf-close:hover { border-color: var(--cp-gold); color: var(--cp-gold); }
.cp2-pf-modal-body { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.cp2-pf-modal-title { font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 700; color: var(--cp-ink); padding-right: 40px; }
/* Below 1025px the portfolio popup becomes a right-side drawer: the overlay
pins content to the right edge and the modal fills the viewport height and
slides in from the right. Above 1024px it stays the centred modal above. */
@media (max-width: 1024px) {
.cp2-pf-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
.cp2-pf-modal {
/* 80% on phones (leaves a strip of dimmed overlay so it reads as a drawer,
not a full page); still caps at 480px on tablet. */
width: min(480px, 80%);
/* dvh (dynamic viewport height) = the VISIBLE area, so the drawer's bottom
isn't hidden under the phone browser's toolbar (with height:100%/inset:0
the overlay is the taller layout viewport and the last content got
chopped + unreachable by scroll). 100vh fallback for old browsers. */
height: 100vh;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3);
overscroll-behavior: contain;
animation: cp2-pf-drawer-in 0.28s ease;
}
}
@keyframes cp2-pf-drawer-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* Header row: metas on the left, the Visit Website / platform links on the right. */
.cp2-pf-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--cp-line); }
.cp2-pf-metas { display: flex; flex-wrap: wrap; gap: 12px 40px; flex: 1 1 auto; }
.cp2-pf-meta-item { display: flex; flex-direction: column; gap: 4px; }
.cp2-pf-meta-label { color: var(--cp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.cp2-pf-meta-val { color: var(--cp-ink); font-size: 16px; font-weight: 600; }
.cp2-pf-gallery { display: flex; flex-direction: column; gap: 12px; }
.cp2-pf-gallery img { width: 100%; border-radius: var(--cp-r-md); border: 1px solid var(--cp-line); background: var(--cp-fill); }
/* Each gallery image shows a shimmer skeleton until it loads, then fades in. */
.cp2-pf-gimg { position: relative; }
.cp2-pf-gimg:not(.is-loaded) { min-height: 220px; }
.cp2-pf-gimg img { display: block; opacity: 0; transition: opacity 0.3s ease; }
.cp2-pf-gimg.is-loaded img { opacity: 1; }
.cp2-pf-gimg-skeleton {
position: absolute; inset: 0; border-radius: var(--cp-r-md);
background: linear-gradient(100deg, #ececec 25%, #fdf6e9 45%, #ececec 65%);
background-size: 200% 100%;
animation: cp2-shimmer 1.3s ease-in-out infinite;
}
@keyframes cp2-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.cp2-pf-desc { color: var(--cp-muted); font-size: 16px; line-height: 1.7; white-space: pre-line; }
.cp2-pf-links { display: flex; flex-wrap: wrap; gap: 12px; }
/* Portfolio project-link buttons — legacy look: light-grey pill, grey label,
grey platform glyph (Web App / Play Store / App Store). Colour pinned on
hover/focus so common.css's global a:hover{color:gold} can't tint them. */
.cp2-pf-linkbtn {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 15px; border-radius: var(--cp-r-sm);
background: var(--cp-fill); color: var(--cp-muted);
font-size: 12px; font-weight: 600; text-decoration: none;
transition: background 0.16s ease;
}
.cp2-pf-linkbtn:hover,
.cp2-pf-linkbtn:focus,
.cp2-pf-linkbtn:focus-visible,
.cp2-pf-linkbtn:active { color: var(--cp-muted); }
.cp2-pf-linkbtn:hover { background: #e0e9f2; }
.cp2-pf-linkbtn-icon { width: 15px; height: 15px; flex: 0 0 auto; }
/* ══════════════════════════════════════════════════════════════════════════
* INTERVIEW
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-person { display: flex; align-items: center; gap: 10px; }
.cp2-person-pic { width: 39px; height: 39px; border-radius: 50%; background: #d9d9d9; object-fit: cover; flex: 0 0 auto; }
.cp2-person-name { color: var(--cp-ink); font-size: 16px; font-weight: 500; }
.cp2-person-role { color: var(--cp-muted); font-size: 12px; }
/* Interviewer header row: person on the left, LinkedIn "Visit Profile" on the
right (legacy .interviewer-linkedin-profile — LinkedIn blue border + icon). */
.cp2-interview-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.cp2-interview-linkedin { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border: 1px solid #0a66c2; border-radius: var(--cp-r-sm); color: #0a66c2; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.16s ease; }
.cp2-interview-linkedin:hover,
.cp2-interview-linkedin:focus { background: rgba(10, 102, 194, 0.07); color: #0a66c2; }
.cp2-interview-card { border: 1px solid var(--cp-muted); border-radius: var(--cp-r-lg); padding: 20px; display: flex; flex-direction: column; gap: 20px; }
/* Q&A list; clamps to ~2-3 pairs with a white fade until "Read more". */
.cp2-interview-body { display: flex; flex-direction: column; gap: 24px; }
.cp2-interview-body.is-clamped { max-height: 480px; overflow: hidden; position: relative; }
.cp2-interview-body.is-clamped::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
background: linear-gradient(to top, var(--cp-paper), rgba(255, 255, 255, 0));
pointer-events: none;
}
.cp2-qa-q { color: var(--cp-ink); font-size: 20px; font-weight: 500; line-height: 1.5; margin: 0 0 10px; }
.cp2-qa-a { color: var(--cp-muted); font-size: 16px; line-height: 1.5; margin: 0; }
/* answers are injected HTML (sanitized) — normalise inner block margins */
.cp2-qa-a p, .cp2-qa-a div { margin: 0; }
/* ══════════════════════════════════════════════════════════════════════════
* VERIFIED BUSINESS (Q5)
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-verified { display: flex; flex-direction: column; }
.cp2-verified-banner { background: var(--cp-green-soft); border-top: 2px solid var(--cp-green); border-radius: var(--cp-r-md) var(--cp-r-md) 0 0; padding: 25px; display: flex; align-items: center; gap: 15px; }
.cp2-verified-banner-icon { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--cp-r-sm); background: rgba(44,174,69,.2); display: grid; place-items: center; color: var(--cp-green); font-size: 24px; }
.cp2-verified-banner-title { font-size: 22px; font-weight: 600; }
.cp2-verified-banner-meta { color: var(--cp-muted); font-size: 14px; }
.cp2-verified-cols { background: var(--cp-green-soft); border-top: 1px solid var(--cp-line); padding: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 70px; }
.cp2-verified-coltitle { color: var(--cp-green); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 20px; }
.cp2-verified-kv { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cp-line); }
.cp2-verified-kv:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.cp2-verified-kv-k { color: var(--cp-muted); font-size: 16px; }
.cp2-verified-kv-v { color: var(--cp-ink); font-size: 16px; font-weight: 500; text-align: right; }
.cp2-verified-check { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--cp-line); }
.cp2-verified-check:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.cp2-verified-check-tick { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 12px; background: var(--cp-green); color: #fff; display: grid; place-items: center; font-size: 11px; margin-top: 2px; }
.cp2-verified-check-title { color: var(--cp-ink); font-size: 16px; font-weight: 500; }
.cp2-verified-check-sub { color: var(--cp-muted); font-size: 14px; line-height: 1.5; }
.cp2-verified-foot { background: var(--cp-green-soft); border-top: 1px solid var(--cp-line); border-radius: 0 0 var(--cp-r-md) var(--cp-r-md); padding: 14px 25px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp2-verified-foot-note { flex: 1 1 300px; color: var(--cp-muted); font-size: 12px; line-height: 1.7; }
/* ══════════════════════════════════════════════════════════════════════════
* LOCATIONS ("Where we are")
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-loc-count { color: var(--cp-muted); font-weight: 700; }
.cp2-loc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.cp2-loc-card {
position: relative;
padding: 20px; background: var(--cp-paper);
border: 1px solid var(--cp-line); border-radius: var(--cp-r-lg);
display: flex; flex-direction: column; gap: 20px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Location cards are static — no hover border/shadow. */
.cp2-loc-head { display: flex; flex-direction: column; gap: 12px; }
.cp2-loc-country { display: flex; align-items: center; gap: 10px; }
.cp2-loc-flag { width: 26px; height: 20px; flex: 0 0 auto; border-radius: 3px; object-fit: cover; border: 0.5px solid #dbe0ea; }
/* Rendered as an for document structure; font-family:inherit keeps the
body font (common.css forces Manrope on bare h1-h3) so the look is unchanged. */
.cp2-loc-country-name { color: var(--cp-ink); font-family: inherit; font-size: 22px; font-weight: 600; white-space: nowrap; }
.cp2-loc-address { font-style: normal; color: var(--cp-muted); font-size: 16px; line-height: 1.7; }
/* margin-top:auto pushes the phone to the card's bottom edge so every office
card's phone line sits flush at the bottom, aligned across a row. No hover. */
.cp2-loc-phone { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: var(--cp-muted); font-size: 16px; text-decoration: none; }
.cp2-loc-phone svg { flex: 0 0 auto; }
/* Hero location chip — plain, non-interactive indicator. The full office list
is rendered by the inline Locations section (no popup). */
.cp2-chip-loc { font-family: inherit; }
/* "HQ" tag after the headquarter country name in the hero location chip. */
/* "HQ" reads as a light suffix (like "Employees" on the team-size chip) —
the country name beside it is the bold value (.cp2-chip b). */
.cp2-chip-hq { font-weight: 400; color: var(--cp-muted); margin-left: 2px; }
.cp2-locmodal { position: relative; background: var(--cp-paper); border-radius: var(--cp-r-lg); width: min(1040px, 100%); max-height: 90vh; overflow-y: auto; padding: 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.cp2-locmodal-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding-right: 40px; }
.cp2-locmodal-title { font-family: "Manrope", sans-serif; font-size: 28px; font-weight: 700; color: var(--cp-ink); }
.cp2-locmodal-sub { color: var(--cp-muted); font-size: 18px; line-height: 1.5; }
.cp2-locmodal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
/* "Headquarter" badge on the primary office card (Figma node 11020-73257).
In-flow on the country row (space-between) so it vertically centres with the
country name instead of floating at a fixed offset. */
.cp2-loc-country-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp2-loc-country { flex: 0 1 auto; min-width: 0; }
/* Headquarter tag — a compact ribbon straddling the card's top-right edge, the
same treatment as the Pricing Heatmap "Best Value" tag. Absolute so it costs
no inline space, letting the office cards pack 3 to a row. */
.cp2-loc-hq {
position: absolute; top: -11px; right: 14px;
display: inline-flex; align-items: center; gap: 6px;
background: #fff; color: var(--cp-ink);
border: 1px solid var(--cp-line); border-radius: 6px; padding: 4px 12px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
white-space: nowrap; box-shadow: 0 2px 6px rgba(23, 25, 35, 0.12);
}
.cp2-loc-hq-star {
width: 11px; height: 11px; flex-shrink: 0; background: var(--cp-gold);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* ══════════════════════════════════════════════════════════════════════════
* FEATURED COMPANIES (free-only ad card) — Figma node 11133-74466
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-featured { background: #171923; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 10px; font-family: "Roboto", sans-serif; }
.cp2-featured-title { color: #fff; font-size: 18px; font-weight: 700; line-height: 25.2px; margin: 0; }
/* Auto-scrolling marquee (reuses FeaturedCompanyMarquee: a viewport that clips +
an inner flex row it translateX-animates, recycling the first child; the JS
assumes a 20px inter-card gap). Fixed-width cards so they overflow + scroll. */
.cp2-featured .featured-companies-container { overflow: hidden; }
.cp2-featured .featured-companies-inner-wrap { display: flex; gap: 20px; width: max-content; }
.cp2-featured-card { flex: 0 0 320px; width: 320px; background: #fff; border-radius: 6px; outline: 1px solid #DBDBDB; outline-offset: -1px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.cp2-featured-card-top { display: flex; flex-direction: column; gap: 10px; }
.cp2-featured-head { display: flex; align-items: flex-start; gap: 15px; }
.cp2-featured-logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 6px; border: 1px solid #F1F1F1; object-fit: contain; background: #fff; }
.cp2-featured-name { flex: 1 1 0; min-width: 0; color: #171923; font-size: 18px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.cp2-featured-name:hover { text-decoration: underline; }
.cp2-featured-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp2-featured-rating-text { color: #171923; font-size: 16px; font-weight: 500; line-height: 18px; }
.cp2-featured-btn { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #171923; border-radius: 6px; outline: 1px solid #171923; outline-offset: -1px; padding: 13px 23px; font-size: 18px; font-weight: 500; text-decoration: none; transition: background .18s ease, color .18s ease; }
.cp2-featured-btn:hover { background: #171923; color: #fff; }
/* Narrower cards on mobile so ~1 card + a peek shows while the marquee scrolls. */
@media (max-width: 767px) { .cp2-featured-card { flex-basis: 280px; width: 280px; } }
/* ══════════════════════════════════════════════════════════════════════════
* SIDEBAR
* ═════════════════════════════════════════════════════════════════════════ */
.cp2-sidecard { background: var(--cp-fill); border: 1px solid var(--cp-line); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
/* ── Contact Form CTA (sidebar `sidebar_cta_mode = contact_form`) ──────────────
* Figma node 10915-93096. Replaces the Visit Website card in the same sticky
* `.cp2-aside` slot. Roboto per the design; own token values (not the cp2 vars). */
/* Contact-form aside sticks closer to the tab bar than the Visit Website card:
* the shared `.cp2-aside` uses top:96px (a 37px gap below the 59px tab bar); the
* contact form has no hero-overlap need, so pull it up. Scoped via --cf so the
* default Visit Website card's sticky position is unchanged. */
.cp2-aside--cf { top: 68px; }
.cp2-cf { position: relative; background: #ECECEC; border-radius: 8px; outline: 1px solid #DBDBDB; outline-offset: -1px; padding: 16px 20px 30px; display: flex; flex-direction: column; gap: 10px; font-family: "Roboto", sans-serif; }
@media (max-width: 767px) { .cp2-cf { padding: 16px 16px 24px; } }
/* ✕ back-to-Visit-Website control (toggle mode only — rendered when ContactFormV2
gets an `onClose`). Absolute top-right; the title reserves room via :has() so a
long company name never runs under it. */
.cp2-cf-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: #171923; cursor: pointer; padding: 0; transition: background 0.15s; }
.cp2-cf-close:hover { background: rgba(23,25,35,0.08); }
.cp2-cf:has(.cp2-cf-close) .cp2-cf-title { padding-right: 34px; }
/* Smooth swap between the Visit Website card and the Contact Form (SidebarCtaCardV2).
The wrapper is remounted with key={view}, so this fade+slide replays on each
toggle (Contact Now → form, ✕ → card). Honors reduced-motion. */
.cp2-cta-view { animation: cp2-cta-in 0.28s ease both; }
@keyframes cp2-cta-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cp2-cta-view { animation: none; }
}
/* Fields: 1 column by default (mobile + the narrow ~384px desktop sidebar). On
* tablet (768-1024) the aside is full content width — same width as the other
* sections — so lay the fields out 2-up (auto-flow gives name|email, country|message). */
.cp2-cf-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) and (max-width: 1024px) {
.cp2-cf-fields { grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
}
.cp2-cf-title { color: #171923; font-size: 24px; font-weight: 700; line-height: 1.2; }
.cp2-cf-sub { margin: -4px 0 6px; color: #444B55; font-size: 14px; font-weight: 400; line-height: 24px; }
.cp2-cf-field { display: flex; flex-direction: column; gap: 5px; }
.cp2-cf-label { color: #171923; font-size: 14px; font-weight: 400; line-height: 24px; }
.cp2-cf-req { color: #FF3032; font-weight: 600; }
.cp2-cf-input, .cp2-cf-textarea { width: 100%; background: #fff; border: 1px solid #DBDBDB; border-radius: 4px; padding: 9px 12px; font-family: inherit; font-size: 14px; line-height: 1.3; color: #171923; outline: none; }
.cp2-cf-input:focus, .cp2-cf-textarea:focus { border-color: #C5A063; }
.cp2-cf-input::placeholder, .cp2-cf-textarea::placeholder { color: #444B55; opacity: 0.5; }
/* Country dropdown = the shared Cp2Select (same control as the reviews filters),
restyled to match the form inputs: full width, form padding, gold caret. */
.cp2-cf-dd { width: 100%; }
.cp2-cf-dd .cp2-dd-btn { width: 100%; min-width: 0; max-width: none; padding: 9px 12px; font-size: 14px; }
.cp2-cf-dd .cp2-dd-caret { color: #C5A063; }
/* Contact number: a compact dial-code select + the local number on one row.
The dial-code button shows only the code ("+1", via Cp2Select shortLabel);
the dropdown list still shows "+1 United States". So the control is narrow. */
.cp2-cf-phone { display: flex; gap: 8px; align-items: stretch; }
.cp2-cf-dialcode { flex: 0 0 86px; min-width: 0; max-width: 86px; }
.cp2-cf-dialcode .cp2-dd-btn { width: 100%; min-width: 0; max-width: none; padding: 9px 10px; font-size: 14px; gap: 4px; }
.cp2-cf-dialcode .cp2-dd-caret { color: #C5A063; }
.cp2-cf-phone-input { flex: 1 1 auto; min-width: 0; }
/* common.css sets a bare `textarea { height: 82px }` — an explicit height that
* min-height/rows can't override, so we set height here directly to size it. */
.cp2-cf-textarea { height: 60px; min-height: 60px; resize: vertical; }
.cp2-cf-turnstile { display: flex; justify-content: center; padding-top: 2px; max-width: 100%; overflow: hidden; }
.cp2-cf-turnstile > * { max-width: 100%; }
.cp2-cf-submit { width: 100%; background: #171923; color: #fff; border: 1px solid #fff; border-radius: 6px; padding: 14px 23px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.cp2-cf-submit:hover { background: #2A2D3D; }
.cp2-cf-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cp2-cf-foot { color: #444B55; font-size: 13px; text-align: center; }
.cp2-cf-err { color: #C0392B; font-size: 12px; }
.cp2-cf-globalerr { margin: 0; background: #FFF4F0; color: #A23E1A; font-size: 13px; padding: 8px 12px; border-radius: 4px; }
.cp2-cf-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 0; }
.cp2-cf-success-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(34,160,107,0.1); display: flex; align-items: center; justify-content: center; }
.cp2-cf-success-title { color: #171923; font-size: 18px; font-weight: 700; }
.cp2-cf-success-sub { margin: 0; color: #444B55; font-size: 14px; line-height: 20px; }
/* Logo + name, revealed in the sticky card after the hero scrolls away. Hidden
by default with a -20px margin to cancel the card's flex gap so it leaves no
space; SidebarBrandV2 toggles `.is-shown` from an IntersectionObserver. */
.cp2-side-brand {
display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
max-height: 0; margin-bottom: -20px; opacity: 0; overflow: hidden;
pointer-events: none; padding-bottom: 4px;
transition: max-height 0.3s ease, margin-bottom 0.3s ease, opacity 0.22s ease;
}
.cp2-side-brand.is-shown { max-height: 200px; margin-bottom: 0; opacity: 1; pointer-events: auto; }
/* `contain` (not `cover`) — a logo is usually non-square; `cover` cropped and
* zoomed it to fill the 44×44 box (and upscaled small logos into a blur).
* `contain` shows the whole logo at its aspect ratio, matching `.cp2-hero-logo`. */
.cp2-side-brand-logo { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 8px; object-fit: contain; padding: 3px; background: #fff; border: 1px solid var(--cp-line); }
/* Top row: logo + company name side by side; the name wraps to multiple lines
when long (matching the Figma). */
.cp2-side-brand-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.cp2-side-brand-name { flex: 1 1 auto; min-width: 0; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--cp-ink); }
/* Overall rating on its own row below the logo + name: stars then "5.0 (N)". */
.cp2-side-brand-rating { display: inline-flex; align-items: center; gap: 10px; }
.cp2-side-brand-rating-text { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; line-height: 1; color: var(--cp-ink); white-space: nowrap; }
.cp2-side-why-label { color: var(--cp-muted); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
.cp2-side-why-list { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.cp2-side-why-item { display: flex; align-items: flex-start; gap: 6px; color: var(--cp-ink); font-size: 16px; line-height: 1.5; }
.cp2-side-why-tick { width: 18px; height: 18px; flex: 0 0 auto; border-radius: var(--cp-r-pill); background: var(--cp-gold); color: var(--cp-muted); display: grid; place-items: center; font-size: 11px; margin-top: 2px; }
.cp2-side-verified-note { color: var(--cp-muted); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.cp2-side-verified-shield { color: var(--cp-gold); display: inline-grid; place-items: center; flex: 0 0 auto; }
.cp2-side-verified-note a { color: var(--cp-gold); text-decoration: none; }
/* ══════════════════════════════════════════════════════════════════════════
* RESPONSIVE
* ═════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
* INTERACTIVE / HOVER STATES — every clickable/control element gets feedback,
* every display card a subtle elevation. All transitions are disabled under
* prefers-reduced-motion (see the block at the foot of this file).
* ═════════════════════════════════════════════════════════════════════════ */
/* buttons — lift + shadow on top of the per-variant colour change */
.cp2-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(23, 25, 35, 0.14); }
.cp2-btn:active { transform: translateY(0); box-shadow: none; }
.cp2-btn:focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; }
/* links / text links / tabs — underline + gold, keyboard-visible outline */
.cp2-textlink:focus-visible,
.cp2-tab:focus-visible,
.cp2-hero-writelink:focus-visible,
.cp2-side-verified-note a:focus-visible {
outline: 2px solid var(--cp-gold); outline-offset: 2px; border-radius: 2px;
}
.cp2-side-verified-note a { transition: color 0.16s ease; }
.cp2-side-verified-note a:hover { text-decoration: underline; }
.cp2-verified-foot a { color: var(--cp-gold); text-decoration: none; }
.cp2-verified-foot a:hover { text-decoration: underline; }
/* meta chips — gold border on hover. Review category chips (`.cp2-chip--plain`)
are static labels: no hover state; they carry a "Category" tooltip instead. */
.cp2-chip {
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.cp2-chip:hover { border-color: var(--cp-gold); }
/* reviewer-keyword chips — clickable filter affordance */
.cp2-keychip {
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
/* Scope the hover recolor to NON-active chips — the active chip has a dark
(--cp-ink) background, so `color: var(--cp-ink)` on hover would paint its
text dark-on-dark and make it vanish. Active chip just gets the gold border. */
.cp2-keychip:not(.is-active):hover { border-color: var(--cp-gold); color: var(--cp-ink); }
.cp2-keychip:not(.is-active):hover .cp2-keychip-count { color: var(--cp-gold); }
.cp2-keychip.is-active:hover { border-color: var(--cp-gold); }
/* focus practice rows — gold highlight */
.cp2-focus-item {
transition: border-color 0.16s ease, background-color 0.16s ease;
}
.cp2-focus-item:hover { border-color: var(--cp-gold); background: var(--cp-gold-soft); }
/* client chips — static (no hover effect, per stakeholder) */
/* selects — gold border + focus ring */
.cp2-select {
cursor: pointer;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.cp2-select:hover { border-color: var(--cp-gold); }
.cp2-select:focus-visible {
border-color: var(--cp-gold);
outline: none;
box-shadow: 0 0 0 3px rgba(197, 160, 99, 0.25);
}
/* display cards — subtle elevation */
.cp2-review,
.cp2-aitool,
.cp2-portfolio-card {
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cp2-review:hover { border-color: #c9cdd4; box-shadow: 0 10px 26px rgba(23, 25, 35, 0.08); }
.cp2-aitool:hover {
border-color: var(--cp-gold);
box-shadow: 0 10px 26px rgba(23, 25, 35, 0.08);
transform: translateY(-2px);
}
/* portfolio card — lift + image zoom (card clips via overflow:hidden) */
.cp2-portfolio-card:hover {
box-shadow: 0 12px 28px rgba(23, 25, 35, 0.12);
transform: translateY(-2px);
}
.cp2-portfolio-img { transition: transform 0.3s ease; }
.cp2-portfolio-card:hover .cp2-portfolio-img { transform: scale(1.05); }
/* partner / certification logos — subtle nudge */
.cp2-hero-prog-logos img { transition: transform 0.16s ease; }
.cp2-hero-prog-logos img:hover { transform: translateY(-2px); }
/* Type scale (H1 = hero title, H2 = section titles, H3 = sub-section titles):
* Desktop >1024 : H1 48 · H2 32 · H3 22
* Tablet ≤1024 : H1 48 · H2 36 · H3 18
* Mobile ≤767 : H1 24 · H2 22 · H3 18
* Grids already use minmax(min(px,100%),1fr) so no card floor exceeds the
* viewport (the 2026-08-05 horizontal-overflow lesson). */
/* Tablet + down — single content column: hero → sidebar → sections. Keep the
same named lines so grid-column: main/side still resolve. */
@media (max-width: 1024px) {
.cp2-loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The sidebar isn't sticky on tablet/mobile (it's a normal full-width row),
so the scroll-revealed logo + company name serves no purpose here — hide it.
Instead, surface a compact Visit Website CTA in the always-sticky tab bar. */
.cp2-side-brand { display: none; }
.cp2-tabnav .cp2-tabnav-cta { display: inline-flex; padding: 9px 18px; font-size: 14px; }
/* Visit Website is the ONLY CTA in the sticky bar, by product decision
(2026-09-14). Schedule a Call was here too and was removed: it made the
tab strip crowd out the tab labels on a phone. It still renders in the
sidebar card, which at this breakpoint is a normal full-width row rather
than a sticky one - so the button scrolls with the page instead of
following it. That is accepted, and matches how Contact Now behaves. */
.cp2-page {
grid-template-columns:
[full-start] minmax(16px, 1fr)
[main-start side-start] minmax(0, var(--cp-shell))
[main-end side-end] minmax(16px, 1fr)
[full-end];
}
.cp2-heroband { grid-column: full-start / full-end; grid-row: 1; }
.cp2-hero { grid-column: main-start / main-end; grid-row: 1; }
.cp2-aside {
grid-column: side-start / side-end; grid-row: 2;
position: static;
margin-top: 30px; /* gap between the stacked hero band and the Visit Website card */
}
.cp2-main { grid-column: main-start / main-end; grid-row: 3; padding-top: 30px; }
.cp2-reviews-top { grid-template-columns: 1fr; }
.cp2-verified-cols { grid-template-columns: 1fr; gap: 30px; }
/* Restates the desktop size rather than overriding it. It MUST track the
base .cp2-hero-title value (48px -> 36px, 2026-09-11): left behind at
48px it would have made the tablet heading LARGER than the desktop one. */
.cp2-hero-title { font-size: 36px; }
.cp2-h2 { font-size: 36px; }
.cp2-h3,
.cp2-loc-country-name,
.cp2-analytics-title,
.cp2-aisummary-title,
.cp2-verified-banner-title,
.cp2-review-toolbar-title { font-size: 18px; }
}
/* Mobile */
@media (max-width: 767px) {
.cp2-wrap { padding: 0 16px; }
.cp2-hero { padding: 40px 0; }
.cp2-hero .cp2-wrap { gap: 40px; }
/* Left-align the logo + name (was centred by the base align-items:center in
column mode); the tagline/rating below are already left-aligned. */
.cp2-hero-top { flex-direction: column; align-items: flex-start; }
/* Pro Verified badge shows the tick only — hide the label, make it a circle. */
.cp2-badge-verified-text { display: none; }
.cp2-badge-verified {
width: 22px; height: 22px; padding: 0; justify-content: center;
border-radius: 50%; gap: 0; font-size: 12px;
}
/* Hero meta: swap the pill chips for a 2-up icon + stacked value/label grid. */
.cp2-hero-meta { display: none; }
.cp2-hero-metagrid {
display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; width: 100%;
/* Small breathing room so the meta block reads as separate from the rating
row above and the certifications below. */
margin: 10px 0 6px;
}
.cp2-metaitem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp2-metaitem-icon { flex: 0 0 auto; display: inline-flex; color: var(--cp-gold); }
.cp2-metaitem-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp2-metaitem-val {
color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2;
overflow-wrap: anywhere;
}
.cp2-metaitem-label {
color: rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 500;
letter-spacing: 0.05em; text-transform: uppercase;
}
/* Normalise all meta-grid icons to one size — the location pin was smaller
(13px intrinsic) than the dollar/people/calendar glyphs. */
.cp2-metaitem-icon svg { width: 20px; height: 20px; }
/* Rating row on ONE line: drop the 5-star bar for a single star, no wrap.
Tightened gap + slightly smaller text so it also fits 320px without
overflowing (measured: 5-star bar + full text overflowed even at 360). */
.cp2-hero-ratingrow { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
.cp2-hero-ratingrow .cp2-stars { display: none; }
.cp2-hero-star1 { display: inline-flex; }
.cp2-hero-ratingnum { font-size: 15px; }
.cp2-hero-writelink { font-size: 15px; }
.cp2-hero-sep { margin: 0 -2px; }
.cp2-hero-programs { flex-direction: column; gap: 24px; }
.cp2-hero-prog + .cp2-hero-prog { padding-left: 0; border-left: 0; }
.cp2-focus-block { flex-direction: column; align-items: stretch; gap: 30px; }
/* Stacked: no donut beside the list, so it takes the full width (overrides the
desktop `min(450px, calc(100% - 320px))` which assumes a donut to the side). */
.cp2-focus-listwrap { width: 100%; }
.cp2-focus-chart { align-self: center; }
.cp2-review-ratingbox { gap: 20px; }
.cp2-review-overall { flex-basis: 100%; width: auto; }
.cp2-body { padding: 40px 0; }
.cp2-main { gap: 40px; }
.cp2-reviews-card { gap: 20px; }
.cp2-loc-grid { grid-template-columns: 1fr; }
.cp2-hero-title { font-size: 24px; }
.cp2-h2 { font-size: 22px; }
.cp2-h3,
.cp2-loc-country-name,
.cp2-analytics-title,
.cp2-aisummary-title,
.cp2-verified-banner-title,
.cp2-review-toolbar-title { font-size: 18px; }
.cp2-sub { font-size: 16px; }
.cp2-hero-tagline { font-size: 15px; }
}
/* ── "profile not fully claimed" banner (bottom of unclaimed profiles) ──── */
.cp2-notclaimed {
background: var(--cp-ink);
border-radius: var(--cp-r-lg);
padding: 32px 36px;
color: #fff;
}
.cp2-notclaimed-title {
font-family: "Manrope", "Roboto", sans-serif;
font-size: 26px;
font-weight: 800;
line-height: 1.2;
margin: 0;
color: #fff;
}
.cp2-notclaimed-sub {
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.6;
margin: 12px 0 0;
max-width: 760px;
}
.cp2-notclaimed-btn { margin-top: 22px; }
/* Submit button sits in the column form (align-items:stretch) — pin it to the
start so it sizes to its content instead of stretching the full form width. */
.cp2-notclaimed-form .cp2-notclaimed-btn { align-self: flex-start; margin-top: 8px; }
.cp2-notclaimed-form {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 620px;
}
.cp2-notclaimed-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cp2-notclaimed-field {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
}
/* Width basis applies ONLY to the two fields in the horizontal First/Last row.
The standalone email field is a direct child of the COLUMN form, where a
flex-basis would become a HEIGHT and inflate the label into empty space. */
.cp2-notclaimed-row .cp2-notclaimed-field { flex: 1 1 220px; }
.cp2-notclaimed-field input {
width: 100%;
padding: 11px 14px;
border-radius: var(--cp-r-sm);
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 15px;
font-family: inherit;
}
.cp2-notclaimed-field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.cp2-notclaimed-field input:focus-visible {
outline: none;
border-color: var(--cp-gold);
}
.cp2-notclaimed-error { color: #ff9b9b; font-size: 14px; margin: 0; }
.cp2-notclaimed-btn[disabled] { opacity: 0.7; cursor: default; }
.cp2-notclaimed-thanks { display: flex; align-items: flex-start; gap: 16px; }
.cp2-notclaimed-check {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(44, 174, 69, 0.18);
color: var(--cp-green-line);
}
@media (max-width: 640px) {
.cp2-notclaimed { padding: 24px 20px; }
.cp2-notclaimed-title { font-size: 20px; }
.cp2-notclaimed-row { flex-direction: column; gap: 16px; }
.cp2-notclaimed-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cp2-btn, .cp2-tab, .cp2-chip, .cp2-chip--plain, .cp2-keychip,
.cp2-focus-item, .cp2-client-chip, .cp2-select, .cp2-review, .cp2-aitool,
.cp2-portfolio-card, .cp2-portfolio-img, .cp2-hero-prog-logos img,
.cp2-side-verified-note a { transition: none; }
.cp2-btn:hover, .cp2-aitool:hover, .cp2-portfolio-card:hover { transform: none; }
.cp2-portfolio-card:hover .cp2-portfolio-img { transform: none; }
.cp2-hero-prog-logos img:hover { transform: none; }
.cp2-pf-gimg-skeleton { animation: none; }
.cp2-pf-modal { animation: none; }
html { scroll-behavior: auto; }
}