/* ==========================================================================
   Companies page refresh (2026-09-16) — loaded only by companies/index.html.
   Everything is prefixed cx- so it never touches the rest of the site.
   ========================================================================== */

/* ---------- hero: Westbrook reel behind, statement bottom-left ---------- */
.cx-vhero{justify-content:flex-end;padding-bottom:clamp(2.6rem,7vh,5.5rem)}
.cx-vhero .hero-bg::after{background:linear-gradient(180deg,rgba(13,47,45,.45) 0%,rgba(13,47,45,.12) 40%,rgba(13,47,45,.72) 100%)}
.cx-vhero .cx-statement{color:var(--paper);text-shadow:0 2px 24px rgba(13,47,45,.5)}
.cx-vhero .cx-statement em{color:var(--mist)}
/* set as a real headline (it was 42px at 1440, smaller than the section h2s).
   Each clause is ~11.0-11.4em wide, so 12.2em gives three lines on desktop:
   the plain clause balanced over two, the italic clause on its own */
.cx-statement{margin:0;max-width:12.2em;font-size:clamp(2.1rem,4.6vw,5rem);line-height:1.06;text-wrap:balance}
.cx-statement em{display:block}
.cx-statement .nw{white-space:nowrap}

/* ---------- where we operate: the national map ----------
   "Rooted in Charlotte, investing nationwide." over an engraved atlas plate of the United States
   (tools/usa-map.mjs). The plate is an <img> (land, water, water-lining; drawn once). Over it, in
   the plate's own coordinates: hairline leaders (inline SVG), and the pins and labels (HTML, so
   they keep their pixel size and the web font at any map width). Every state is the same paper
   tone; no region is singled out. Narrow screens (to 740px) show the pins only, with a key under
   the plate. */
/* title and plate are one composition, sized so both fit on screen together (the plate is
   1600x978): on wide, short screens the pair narrows and centres rather than running the pins
   in Florida off the bottom of the window */
.cx-where__plate{margin-inline:auto;max-width:max(min(100%,52rem),calc((100vh - 12rem) * 1.636))}
@supports (height:100svh){.cx-where__plate{max-width:max(min(100%,52rem),calc((100svh - 12rem) * 1.636))}}
.cx-where__title{margin-bottom:clamp(1.6rem,2.6vw,2.6rem);text-align:center}
.cx-map{margin:0}
.cx-map__frame{position:relative;overflow:hidden;background:#C7DFEA;border:1px solid var(--line);container-type:inline-size}
.cx-map__plate{display:block;width:100%;height:auto}
/* the plate's neat line: a second hairline just inside the frame, as on an engraved atlas plate. It
   sits at .5cqi, 8 plate units, so it keeps its place against the Alaska and Hawaii insets, which the
   build script keys to it (NEAT in tools/usa-map.mjs); only the smallest phones hold it at 2.5px */
.cx-map__frame::after{content:'';position:absolute;inset:clamp(2.5px,.5cqi,8px);border:1px solid rgba(18,63,60,.3);pointer-events:none}
.cx-map__leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-map__leaders .ld{stroke:var(--teal);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:view-box}
.cx-map__marks{position:absolute;inset:0;pointer-events:none;
  --lb-n:clamp(.82rem,.6cqi + .5rem,1.1rem);
  --lb-c:clamp(.8rem,.5cqi + .46rem,.98rem);
  /* space between a leader's end and its label: the leaders are drawn in plate units and shrink with
     the map, so on smaller maps the label comes in closer and the line stays longer than the gap */
  --lb-gap:clamp(3px,1.15cqi - 6.2px,7px);
}
/* pins: the house pine dot with a white edge; HQ a ring and core */
.cx-mk{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--pine);box-shadow:0 0 0 1.5px #fff}
.cx-mk--hq{width:21px;height:21px;margin:-10.5px 0 0 -10.5px;background:none;box-shadow:none;border:1.25px solid var(--pine)}
.cx-mk--hq::after{content:'';position:absolute;inset:4.25px;border-radius:50%;background:var(--pine)}
/* exited investments: a smaller grey dot, and its name alone in grey (the phone key gives the city) */
.cx-mk--x{width:8px;height:8px;margin:-4px 0 0 -4px;background:#8C9593}
/* labels: name over city. Land labels (HQ, Connext) sit beside the pin on a paper halo; coastal
   ones sit at the end of their leader, on a water halo, clear of the water-lining */
.cx-lb{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  display:grid;gap:.08em;white-space:nowrap;
  font-family:var(--f-serif);font-optical-sizing:auto;line-height:1.16;
  --halo:#C7DFEA;
  text-shadow:0 0 1px var(--halo),0 0 2px var(--halo),0 0 4px var(--halo),
    1px 1px 0 var(--halo),-1px 1px 0 var(--halo),1px -1px 0 var(--halo),-1px -1px 0 var(--halo);
}
.cx-lb b{font-size:var(--lb-n);font-weight:var(--w-name);letter-spacing:-.003em;color:var(--ink)}
/* cities: a shade darker than --ink-soft, which is 4.4:1 on the water halo; this is 5:1 on water, 6:1 on paper */
.cx-lb>span{font-size:var(--lb-c);font-weight:400;color:#525C5A}
.cx-lb--right{translate:var(--lb-gap) calc(-50% + var(--dy,0%))}
.cx-lb--left{translate:calc(-100% - var(--lb-gap)) calc(-50% + var(--dy,0%));text-align:right}
.cx-lb--above{translate:-50% calc(-100% - 15px);text-align:center;--halo:#F1EEE7}
.cx-lb--below{translate:-50% 10px;text-align:center;--halo:#F1EEE7}
.cx-lb--x b{font-size:var(--lb-c);font-weight:500;color:#5F6967}
.cx-lb--x.cx-lb--below{translate:-50% 11px}
/* what the two dots mean, under the plate */
.cx-map__legend{display:flex;justify-content:center;gap:1.6rem;margin:.9rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.cx-map__legend span{display:inline-flex;align-items:center;gap:.5rem}
.cx-map__legend span::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--pine)}
.cx-map__legend .is-x::before{width:8px;height:8px;background:#8C9593}

/* arrival: HQ lands first, then each company in turn; a leader draws out from its pin and the name
   follows. Without JS or with reduced motion it is simply drawn. */
.cx-map__marks>*,.cx-map__leaders .ld{--d:calc(.4s + var(--i) * .15s)}
.cx-map__marks>[style*="--i:0"]{--d:.25s}
.js .cx-mk{opacity:0;transform:translateY(-10px);transition:opacity .6s var(--ease) var(--d),transform .9s var(--ease-out) var(--d)}
.js .cx-map__leaders .ld{transform:scaleX(0);transition:transform .6s var(--ease-out) calc(var(--d) + .3s)}
.js .cx-lb{opacity:0;transform:translateY(-4px);transition:opacity .7s var(--ease) calc(var(--d) + .4s),transform .9s var(--ease-out) calc(var(--d) + .4s)}
.js .cx-map.is-in .cx-mk,.js .cx-map.is-in .cx-lb{opacity:1;transform:none}
.js .cx-map.is-in .cx-map__leaders .ld{transform:none}

/* the key under the plate, narrow screens only: below 901px (741px until the exited dots were added) the Atlantic side of the plate is too
   narrow for "Essig Pools & Pavers" at a legible size, so the map shows the pins and the key names them */
.cx-map__key{display:none}

@media (max-width:740px){.cx-where__title{text-align:left}}
/* from 2026-10-01 the plate carries nine places (five active, four exited), so the labels give way to the key earlier */
@media (max-width:900px){
  .cx-map__leaders,.cx-lb{display:none}
  .cx-mk{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:0 0 0 1.25px #fff}
  .cx-mk--hq{width:15px;height:15px;margin:-7.5px 0 0 -7.5px}
  .cx-mk--hq::after{inset:3.25px}
  .cx-map__key{display:block;margin-top:1.1rem}
  .cx-map__key ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
  .cx-map__key li{display:grid;grid-template-columns:15px auto 1fr;column-gap:.7rem;align-items:baseline;font-size:1rem;line-height:1.3}
.cx-map__key li span{white-space:nowrap}   /* a place stays whole ("Miramar, FL"); a long name wraps instead */
  .cx-map__key li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pine);justify-self:center;align-self:center}
  .cx-map__key li.is-x::before{background:#8C9593}
  .cx-map__legend{justify-content:flex-start}
  .cx-mk--x{width:6px;height:6px;margin:-3px 0 0 -3px}
  .cx-map__key li.is-hq::before{width:15px;height:15px;box-sizing:border-box;border:1.25px solid var(--pine);background:radial-gradient(circle,var(--pine) 0 3.3px,transparent 3.8px)}
  .cx-map__key b{font-weight:var(--w-name);color:var(--ink)}
  .cx-map__key span{color:var(--ink-soft)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .cx-mk,.js .cx-lb,.js .cx-map__leaders .ld{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Polish pass (2026-09-23) — page-scoped refinements to the shared logo
   tiles and quote cards. Nothing here leaves the companies page.
   ========================================================================== */

/* ---------- logo tiles ---------- */
/* one tile height for the active row (the text layer used to set the height);
   near-square. The exited row sets its own below. */
@media (hover:hover) and (min-width:1101px){
  .cx-portfolio .logo-tile{min-height:clamp(300px,21vw,322px)}
}
/* on narrower four-up tiles the location and "Visit site" collided and wrapped
   ("Atlanta, GA · / 2021–"); keep the location on one line and let the round
   arrow stand alone as the affordance */
.cx-portfolio .logo-tile__foot>span:first-child{white-space:nowrap}
@media (hover:hover) and (min-width:1101px) and (max-width:1380px),
       (hover:hover) and (min-width:561px) and (max-width:900px){
  .cx-portfolio .logo-tile__go{font-size:0;gap:0}
}
.cx-portfolio .logo-tile__desc{text-wrap:pretty}
.cx-portfolio .nw{white-space:nowrap}
/* two-column tiles on mouse/trackpad screens (561-1100): give the row more
   height than the 240px default */
@media (hover:hover) and (min-width:561px) and (max-width:1100px){
  .cx-portfolio .logo-tile{min-height:clamp(280px,34vw,360px)}
}
/* touch: the logo box keeps its 16/10 shape and the text row takes the spare
   height, so logo boxes in a row line up (the shorter description used to
   stretch its logo box instead) */
@media (hover:none){
  .cx-portfolio .logo-tile{grid-template-rows:auto 1fr}
}

/* ---------- five-tile row (.cx-five): the active portfolio since WeBuild joined it (2026-10-01); the exited row is four and uses the plain grid ---------- */
/* Same tiles as the active row (logo on a quiet tile, details on hover,
   details under the logo on touch). The section's class is .cx-exits, so the
   old photo-composite rule in main.css (.cx-portfolio--exited) no longer applies.
   Layout: five across from 1680 (tiles ~281x300 and up). At 1101-1679 the
   tiles sit on the active row's own 8-column grid, 3 + 2 with the pair
   centred, so they are exactly the active tiles' size (five-up there made
   tall, narrow tiles with small logos, and the old 6-column 3 + 2 made them
   wider than the active row). 3 + 2 on 6 columns at 900-1100, where the
   active row is two-up; 2 + 2 + 1 at 561-899; one column on phones
   (main.css). The short row is always centred, never a lonely fifth
   tile. !important only to beat main.css's own `grid-column:auto!important`
   at 1100 and below. */
/* mouse: every tile in the section is the same height (the resting tiles must
   match). Touch and phones size rows to their content; tiles sharing a row
   still match through the grid's stretch. */
.cx-five .logo-tiles{grid-auto-rows:1fr}
@media (max-width:560px),(hover:none){.cx-five .logo-tiles{grid-auto-rows:auto}}
/* from 1101: the active row is 3 + 2 on thirds of the width (the pair centred) — larger tiles than the
   exited row's quarters below it (client, 2026-10-02: active bigger than exited; it need not be one line) */
@media (min-width:1101px){
  .cx-five .logo-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cx-five .logo-tiles>.logo-tile{grid-column:span 2}
  .cx-five .logo-tiles>.logo-tile:nth-child(4){grid-column:2/span 2}
}
@media (min-width:900px) and (max-width:1100px){
  .cx-five .logo-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cx-five .logo-tiles>.logo-tile{grid-column:span 2!important}
  .cx-five .logo-tiles>.logo-tile:nth-child(4){grid-column:2/span 2!important}
}
@media (min-width:561px) and (max-width:899px){
  .cx-five .logo-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx-five .logo-tiles>.logo-tile{grid-column:span 2!important}
  .cx-five .logo-tiles>.logo-tile:nth-child(5){grid-column:2/span 2!important}
}
/* tile heights on mouse screens: at 1101-1679 the active row's own height
   (set above) applies. Five-up and the narrower layouts are a touch shorter,
   still tall enough for the longest hover text (Duncan, with its "Acquired
   by" line). */
/* five across: landscape like the active tiles above (311x280 at 2000px beside 395x322),
   instead of near-square; every tile in the row stretches to the tallest hover text */
/* heights on mouse screens: active tiles tall, exited tiles a step shorter (their rows still stretch to
   the longest hover text) */
@media (hover:hover) and (min-width:1101px){
  .cx-five .logo-tile{min-height:clamp(320px,23vw,430px)}
  .cx-exits .logo-tile{min-height:clamp(230px,15vw,290px)}
}
@media (hover:hover) and (min-width:561px) and (max-width:1100px){
  .cx-five .logo-tile{min-height:clamp(284px,30vw,330px)}
  .cx-exits .logo-tile{min-height:clamp(200px,22vw,240px)}
}
/* the exited row: four across on quarters from 900 (the active row is on thirds there); two by two below */
@media (min-width:900px) and (max-width:1100px){
  .cx-exits .logo-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx-exits .logo-tile__text{padding:.9rem;gap:.4rem}
  .cx-exits .logo-tile__desc{font-size:.95rem;line-height:1.34}
}
.cx-exits .logo-tiles{grid-auto-rows:1fr}
@media (max-width:560px),(hover:none){.cx-exits .logo-tiles{grid-auto-rows:auto}}

/* optical balance: all five are horizontal lockups but of very different
   weight, so each is sized by eye rather than by its box. --lw is the image
   width as a % of the tile, tuned on a narrow (~244px) tile so the inked
   area comes out close to even at any width; the px cap stops them growing in the
   wider 3-up, 2-up and phone tiles. The dense, dark marks (Wathco's navy cubes,
   the solid WeBuild wordmark) sit smallest; RevPartners' thin green wordmark
   and the light orange Pathway lockup sit largest. */
.cx-exits .logo-tile__logo img{
  --lw:66;
  width:min(calc(var(--lw) * 1%), calc(var(--lw) * 3px));
  height:auto;max-width:none;max-height:none;
}
.cx-exits img[src*="exit-revpartners"]{--lw:77}
.cx-exits img[src*="exit-pathway"]{--lw:76}
.cx-exits img[src*="exit-duncan-sons"]{--lw:72}
.cx-exits img[src*="exit-wathco"]{--lw:57}
.cx-exits img[src*="exit-webuild"]{--lw:59}

/* hover copy: sized to the tile (five across is narrower than the active row) */
@media (hover:hover){.cx-exits .logo-tile__text{padding:clamp(1.05rem,9cqi,1.7rem)}}
.cx-exits .logo-tile__desc{font-size:clamp(1rem,7cqi,1.2rem)}
/* "Acquired by …" sits with the location and year at the foot of the tile */
.cx-exit{margin-top:auto;font-size:.94rem;line-height:1.35;font-weight:var(--w-name);color:var(--ink)}
.cx-exit+.logo-tile__foot{margin-top:-.25rem;padding-top:0}
/* the page's width-band rule above hides "Visit site" on the active row; here
   the tile's own width decides: the label shows only where it fits on the same
   line as the place and year, and on narrow tiles the year drops under the
   city rather than crowding the arrow. Hover tiles lose ~2 x 1.7rem to padding,
   so their thresholds are wider than the touch layout's. */
.cx-exits .logo-tile__go{font-size:inherit;gap:.5rem}
@container (max-width:349px){.cx-exits .logo-tile__go{font-size:0;gap:0}}
@container (max-width:269px){.cx-exits .cx-sep{display:none}.cx-exits .cx-yr{display:block}}
@media (hover:hover){
  @container (max-width:419px){.cx-exits .logo-tile__go{font-size:0;gap:0}}
  @container (max-width:329px){.cx-exits .cx-sep{display:none}.cx-exits .cx-yr{display:block}}
}
/* where the year drops under the city, the arrow sits on the foot's last line.
   Centring it put WeBuild's arrow (one line, no city) 8px below the others. */
@container (max-width:269px){.cx-exits .logo-tile__foot{align-items:flex-end}}
@media (hover:hover){
  @container (max-width:329px){.cx-exits .logo-tile__foot{align-items:flex-end}}
}
/* Duncan's link goes to Clean Team's announcement, not a Duncan site, so its
   label reads "Read more" and shows wherever it fits on the arrow's row. Its
   year drops under the city over a wider range than the other tiles' so the
   label has room (stacked, the foot needs ~221px of text width; on one line
   ~330px). On the narrowest tiles the label would need a row of its own,
   which made every tile in the section ~35px taller, so there the round
   arrow stands alone and the link's title carries the hint. Touch tiles have
   no side padding, hence the lower thresholds. */
.cx-exits .logo-tile[href*="cleanteamclean"] .logo-tile__foot{column-gap:.6rem}
@container (min-width:226px){.cx-exits .logo-tile[href*="cleanteamclean"] .logo-tile__go{font-size:inherit;gap:.5rem}}
@container (max-width:339px){
  .cx-exits .logo-tile[href*="cleanteamclean"] .cx-sep{display:none}
  .cx-exits .logo-tile[href*="cleanteamclean"] .cx-yr{display:block}
  .cx-exits .logo-tile[href*="cleanteamclean"] .logo-tile__foot{align-items:flex-end}
}
@media (hover:hover){
  @container (max-width:271px){.cx-exits .logo-tile[href*="cleanteamclean"] .logo-tile__go{font-size:0;gap:0}}
  @container (max-width:399px){
    .cx-exits .logo-tile[href*="cleanteamclean"] .cx-sep{display:none}
    .cx-exits .logo-tile[href*="cleanteamclean"] .cx-yr{display:block}
    .cx-exits .logo-tile[href*="cleanteamclean"] .logo-tile__foot{align-items:flex-end}
  }
}

/* optical balance: the CRA mark (icon + tagline) read far heavier than the
   three wordmarks; the Essig wordmark read light */
.cx-portfolio .logo-tile__logo img[src*="logo-cra"]{max-width:min(56%,220px)}
.cx-portfolio .logo-tile__logo img[src*="logo-essig"]{max-width:min(72%,280px)}
#cx-portfolio .logo-tile__logo img[src*="exit-webuild"]{max-width:min(58%,230px)}
@media (min-width:1101px){#cx-portfolio .logo-tile__logo img{max-width:min(62%,300px)}#cx-portfolio .logo-tile__logo img[src*="logo-cra"]{max-width:min(52%,250px)}#cx-portfolio .logo-tile__logo img[src*="exit-webuild"]{max-width:min(54%,260px)}}

/* ---------- testimonials ---------- */
/* quote mark on top, name on the bottom line, so both cards in a row share
   the same top and baseline instead of floating at different heights
   (two-up grid only; single-column cards stay vertically centred) */
@media (min-width:1280px){
  .cx-voices .tq-body{justify-content:flex-start}
  .cx-voices .tq-body figcaption{margin-top:auto;padding-top:.4rem}
}
/* two-up only from 1280: at 1061-1279 each quote column was ~220px wide
   (24 characters a line) and the portraits shrank to slivers. Single column
   sits flush left under the section heading instead of centred. */
@media (max-width:1279px){
  .cx-voices .tq-grid{grid-template-columns:1fr;max-width:860px;margin-inline:0}
}
@media (max-width:1060px){
  .cx-voices .tq-grid{max-width:760px}
}
.cx-voices .tq-body blockquote{text-wrap:pretty}
/* one opening mark per card, set lighter; the rotated closing mark read as clip-art */
.cx-voices .tq-mark--end{display:none}
.cx-voices .tq-mark{width:clamp(20px,1.8vw,26px);opacity:.85}
/* a light common grade so the four portraits (different shoots) sit together */
.cx-voices .tq-card img{filter:saturate(.88) contrast(1.03)}
/* phones: the 4:3 crop cut faces off at the mouth; square frames keep the
   whole face, positioned per portrait */
@media (max-width:560px){
  .cx-voices .tq-card img{aspect-ratio:1/1;height:auto;min-height:0;object-position:50% 34%}
  .cx-voices .tq-card img[src*="jason-morrow"]{object-position:50% 46%}
  .cx-voices .tq-card img[src*="jason-walder"]{object-position:50% 32%}
  .cx-voices .tq-card img[src*="brendan-tolleson"]{object-position:50% 30%}
}

/* ---------- active + exited read as one portfolio (client request 2026-09-23) ----------
   Both rows sit on the same paper with the same grey tiles (the exited row used to be on the
   alt band, which turned its tiles white), and the gap between them is halved with no hairline,
   so "Exited investments." follows the active row instead of starting a new chapter. */
#cx-portfolio{padding-bottom:var(--sect-half)}
.cx-exits.section{padding-top:var(--sect-half)}
.cx-exits.section::before{display:none}

/* compliance note under the exited tiles (2026-10-08): small, centred, quiet, like Giving's note under its beds */
.cx-note{max-width:60rem;margin:clamp(2.2rem,4vw,3.4rem) auto 0;text-align:center;color:var(--ink-soft);font-size:.9rem;line-height:1.6;text-wrap:balance}
@media (max-width:700px){.cx-note{text-align:left;margin-inline:0;font-size:.84rem;line-height:1.5}}