/* Match UP company pages (phase 2A, 2026-11-01): /services/, the two pillar
   pages, /about/, /team/ and the profiles, /partners/. Loads on every
   non-front page after components.css. Composes the shared parts (page head,
   disclosure rows, hairlists, ID badges, logo band, desk plates, cta.php);
   only the page layouts live here. Prefix: co-. */

/* ==========================================================================
   „ვრცლად": the rest of a lead, as one full-width hairline row under it
   ========================================================================== */
.co-more { margin-top: clamp(16px, 2vw, 22px); padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--hair); max-width: var(--measure); }
.co-more > * + * { margin-top: .8em; }

.co-lede { font: 800 clamp(24px, 2.7vw, 40px)/1.18 var(--font-display); text-wrap: balance; margin: 0 0 clamp(28px, 3.4vw, 44px); }

.co-intro { margin-top: 24px; }

/* ==========================================================================
   Two columns: the content and an aside (badge, button or a desk plate)
   ========================================================================== */
.co-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.co-split--plate { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.co-split__aside { position: sticky; top: 32px; display: grid; justify-items: center; gap: 28px; }
.co-split__btn { width: 100%; max-width: 300px; }
.co-split--plate .co-split__aside { justify-items: stretch; }

.co-service__body, .co-about__story, .co-pillars, .co-person__body { padding-top: clamp(16px, 2.4vw, 32px); }
.co-related { padding-top: 0; }
.co-nowrap { white-space: nowrap; }

/* Her quote as one display line. */
.co-quote { margin: 0 0 clamp(32px, 4vw, 52px); max-width: 24ch; font: 800 clamp(26px, 3vw, 44px)/1.15 var(--font-display); text-wrap: balance; }
.co-quote p::before { content: "\201E"; }
.co-quote p::after { content: "\201C"; }

/* Her descriptions inside the rows: lists keep their bullets. */
.co-rows .row__body ul { list-style: disc; padding-left: 1.2em; margin-top: .7em; }
.co-rows .row__body ul:first-child { margin-top: 0; }
.co-rows .row__body li + li { margin-top: .35em; }
.co-rows .row__body li::marker { color: var(--burgundy); }

/* Ruled pairs at the foot of a page: vacancies, sibling pillar, team, pillars. */
.co-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 120px); align-items: start; }

/* ==========================================================================
   ID badges outside the homepage stage
   ========================================================================== */
.co-badges .id-badge:nth-child(odd) { transform: rotate(-2.5deg); }
.co-badges .id-badge:nth-child(even) { transform: rotate(2deg) translateY(10px); }
.co-badges--start { justify-content: flex-start; }

/* /team/: the badges lying on the paper desk (the stage's empty desk). */
.co-desk {
  background: url("../images/paper/desk/base.webp") center 46% / cover no-repeat var(--greige-deep);
  padding: clamp(56px, 9vw, 140px) 16px clamp(72px, 10vw, 160px);
}
.co-badges--desk { gap: clamp(10px, 4vw, 64px); flex-wrap: nowrap; }
.co-badges--desk .id-badge { width: clamp(150px, 20vw, 264px); box-shadow: 0 26px 34px -18px rgba(20, 14, 10, .7), 0 3px 6px rgba(20, 14, 10, .28); }
.co-pager { padding-top: 32px; }

/* ==========================================================================
   Desk plates used as page images
   ========================================================================== */
.co-plate { margin: 0; display: grid; gap: 16px; }
.co-plate img { width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; border-radius: 4px; }
.co-plate figcaption { display: flex; align-items: center; gap: 14px; font: 700 var(--t-row)/1.3 var(--font-display); }
.co-plate figcaption::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--burgundy); }

/* ==========================================================================
   /services/: one ruled block per pillar
   ========================================================================== */
.co-pillar {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 96px);
  padding-block: clamp(28px, 3.4vw, 48px) clamp(48px, 6vw, 88px); border-top: 2px solid var(--rule);
}
.co-pillar:last-of-type { padding-bottom: 0; }
.co-pillar .h-section { font-size: clamp(30px, 3.6vw, 52px); }
.co-pillar .h-section a { display: inline; }
.co-pillar .h-section a svg { display: inline-block; margin-left: .2em; vertical-align: .08em; }
.co-pillar .h-section + .co-pillar__q { margin-top: 18px; }
.co-pillar__q { max-width: 34ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; }
.co-names { columns: 2; column-gap: clamp(24px, 3vw, 48px); margin-top: 6px; }
.co-names li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--hair); font: 700 var(--t-row)/1.3 var(--font-display); }

/* How a collaboration starts: plate beside three ruled steps. */
.co-steps__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.co-steps__list { counter-reset: step; }
.co-steps__list > li { counter-increment: step; }
.co-steps__list .row__t::before { content: counter(step); display: inline-block; min-width: 1.6em; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.co-steps__list .row__body { padding-left: 1.6em; }

/* ==========================================================================
   /about/: values as three ruled words
   ========================================================================== */
.co-values__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.co-values__rows .row__body { padding-right: 0; }

/* ==========================================================================
   Profiles: name and bio lead beside the badge, links below
   ========================================================================== */
.co-person__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.co-person__intro .gap { margin-top: 28px; }
.co-person__badge { display: grid; justify-items: center; }
.co-badge-solo { width: min(100%, 300px); transform: rotate(-2deg); }
.id-badge .co-badge-solo__name { margin-top: 14px; font: 800 clamp(17px, 1.6vw, 22px)/1.2 var(--font-display); color: var(--ink); }
.co-person__back { margin-top: clamp(36px, 4vw, 56px); }
.co-person__back .text-link { text-decoration: none; }
.co-person__back .text-link:hover { text-decoration: underline; }

/* ==========================================================================
   /partners/: the logo band, larger than on the homepage
   ========================================================================== */
.co-band .logo-band__facts + .co-logos { margin-top: clamp(40px, 5vw, 64px); }
.co-logos img { height: calc(var(--h, 40px) * 1.15); max-width: 230px; }
.co-logos a { display: block; border-radius: 6px; }
.co-logos a:hover img { opacity: 1; }

/* ==========================================================================
   The gap where her copy is missing
   ========================================================================== */
.gap { max-width: var(--measure); padding-top: 18px; border-top: 2px solid var(--rule); }
.gap__text { font: 700 var(--t-row)/1.45 var(--font-display); color: var(--ink); }
.gap__note { margin-top: 8px; max-width: none; font-size: var(--t-small); line-height: 1.6; color: var(--grey); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .co-split, .co-split--plate, .co-steps__grid, .co-pillar, .co-related__grid, .co-person__head { grid-template-columns: minmax(0, 1fr); }
  .co-split__aside { position: static; }
  .co-values__rows { grid-template-columns: minmax(0, 1fr); }
  .co-pillar { gap: 20px; }
}
@media (max-width: 700px) {
  .co-names { columns: 1; }
  .co-badges--desk .id-badge { width: 148px; padding: 20px 9px 10px; }
  .co-badges--desk .id-badge p { font-size: 12px; }
  .co-badges--desk { gap: 6px; }
  .co-logos img { height: calc(var(--h, 40px) * .85); max-width: 150px; }
  .co-badge-solo { width: min(100%, 248px); }
}

/* ==========================================================================
   /about/ (feedback round, 2026-11-02): story beside a large paper photo,
   the belief as one display line, three paper cards, values on burgundy.
   Prefix: ab-.
   ========================================================================== */
.ab-story { padding-block: clamp(8px, 2vw, 24px) var(--space-section); }
.ab-story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ab-story__lede { margin-bottom: clamp(22px, 2.6vw, 32px); }
.ab-story__rest { color: var(--ink); font-size: clamp(16.5px, 1.2vw, 18px); }

.ab-photo { position: relative; margin: 0; }
.ab-photo img {
  width: 100%; height: auto; object-fit: cover;
  border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
  transform: rotate(.8deg);
}
/* A cut paper label laid over the photo's corner. */
.ab-photo__tag {
  position: absolute; left: clamp(-14px, -1vw, -6px); bottom: clamp(-22px, -1.6vw, -14px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 16px; background: var(--surface); color: var(--ink);
  font: 800 clamp(14px, 1.2vw, 17px)/1.2 var(--font-display); letter-spacing: .02em;
  border-radius: var(--radius-paper); box-shadow: var(--shadow-card); transform: rotate(-2.5deg);
}
.ab-photo__tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--burgundy); }

.ab-label { font: 800 14px/1.3 var(--font-display); letter-spacing: .08em; color: var(--burgundy); margin-bottom: clamp(18px, 2vw, 26px); }
.ab-belief__text p { max-width: 30ch; font: 800 clamp(26px, 3.6vw, 54px)/1.15 var(--font-display); text-wrap: balance; }
.ab-belief__text p::before { content: "\201E"; color: var(--burgundy); }
.ab-belief__text p::after { content: "\201C"; color: var(--burgundy); }

.ab-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.ab-card {
  position: relative; display: grid; align-content: start; gap: 16px;
  padding: clamp(30px, 3vw, 44px) clamp(24px, 2.4vw, 36px) clamp(30px, 3vw, 40px);
  background: var(--surface); border-radius: var(--radius-paper); box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* A burgundy folder tab cut into the top edge. */
.ab-card::before { content: ""; position: absolute; top: -10px; left: clamp(24px, 2.4vw, 36px); width: 72px; height: 14px; background: var(--burgundy); border-radius: 3px 3px 0 0; }
.ab-card:nth-child(1) { transform: rotate(-.7deg); }
.ab-card:nth-child(2) { transform: rotate(.5deg) translateY(14px); }
.ab-card:nth-child(3) { transform: rotate(-.3deg); }
.ab-card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-paper); }
.ab-card__t { font-size: clamp(22px, 2vw, 28px); font-weight: 900; }
.ab-card__body p { color: var(--ink); line-height: 1.65; }

.ab-values { background: var(--burgundy); color: var(--surface); padding-block: var(--space-section); }
.ab-values__h { color: var(--surface); }
.ab-values__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4.4vw, 60px); }
.ab-values__list li { padding-top: 22px; border-top: 2px solid rgba(250, 248, 247, .5); }
.ab-values__word { font-size: clamp(22px, 2.3vw, 34px); font-weight: 900; line-height: 1.1; color: var(--surface); overflow-wrap: anywhere; }
.ab-values__list p { margin-top: 14px; color: rgba(250, 248, 247, .92); line-height: 1.65; }

.ab-people { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.ab-dirs { display: grid; gap: 16px; }
.ab-dir {
  display: grid; gap: 10px; padding: 24px 26px; text-decoration: none;
  background: var(--greige-lift); border: 1px solid var(--hair); border-radius: var(--radius-card);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.ab-dir:hover { background: var(--surface); border-color: var(--burgundy); transform: translateY(-2px); }
.ab-dir__t { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 800 var(--t-row)/1.3 var(--font-display); }
.ab-dir__t svg { width: 18px; height: 18px; flex: none; color: var(--burgundy); transition: transform .25s var(--ease-out); }
.ab-dir:hover .ab-dir__t svg { transform: translateX(4px); }
.ab-dir__s { color: var(--grey); font-size: var(--t-small); line-height: 1.6; }

@media (max-width: 900px) {
  .ab-story__grid, .ab-people { grid-template-columns: minmax(0, 1fr); }
  .ab-photo { margin-bottom: 18px; }
  .ab-cards__grid, .ab-values__list { grid-template-columns: minmax(0, 1fr); }
  .ab-card:nth-child(n) { transform: none; }
  .ab-card + .ab-card { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-card:hover, .ab-dir:hover { transform: none; }
}