/* Styles for /expertise.html only — loaded on no other page. The header and
   footer are the landing page's own real markup + layout.css/components.css
   rules (no page-specific approximation of either), so nothing for them
   lives here — same convention already established by css/contact-flow.css
   for contact.html. Everything below is specific to this page: the
   editorial introduction, the compact category selector, the
   editorial-intro + category-visual detail section, and the shared
   text-only capability-card system used by every category. */

/* Page-scoped surface tokens — deliberately declared here rather than in
   tokens.css since they're specific to this one page's card/pill system,
   not a new sitewide palette entry. The values are not new,
   approximate hexes: --expertise-surface reproduces layout.css's own
   --capability-circle-bg formula exactly (color-mix(ink 8%, paper)) and
   --expertise-surface-text reproduces --capability-circle-text's literal
   hex exactly — brief: "the exact light-grey background already used by
   the ten homepage capability circles". */
:root {
  --expertise-surface: color-mix(in srgb, var(--cb-color-ink) 8%, var(--cb-color-paper));
  --expertise-surface-text: #4f4d49;
}

/* CATEGORY NAVIGATION — one compact, centred group of rounded controls
   rather than eight separate nav links spread across the page. The
   scrollable row (narrow widths) is unchanged in mechanism: overflow-x
   auto, native scrollbar hidden visually, JS scrolls the active pill into
   view — only the pill visuals and the wide-desktop layout (centred
   instead of distributed) changed. This is now the page's first visible
   element below the header (the previous "Expertise" intro hero above it
   was removed), so its own top padding is what supplies the comfortable
   header-to-pills clearance — the same clamp() used by contact.html's own
   first section after the header, not a new value. */
.expertise-tabs {
  padding-top: clamp(120px, 12vh, 180px);
  padding-bottom: var(--cb-space-4);
}

@media (min-width: 50.0625rem) {
  .expertise-tabs {
    padding-bottom: var(--cb-space-5);
  }
}

@media (min-width: 80rem) {
  .expertise-tabs {
    padding-bottom: var(--cb-space-6);
  }
}

.expertise-tabs__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* Restrained right-edge fade — the review brief's own report: the first
   mobile viewport only shows Strategy/Brand/Web & Platforms with nothing
   suggesting more capabilities sit off-screen. A soft fade (same
   mask-image technique already used for the hero dot field, css/
   dot-field.css) reads as "content continues" without an arrow icon or
   instructional copy. Scoped below the 80rem tier, where the row is
   actually scrollable rather than centred/non-overflowing. */
@media (max-width: 79.9375rem) {
  .expertise-tabs__scroll {
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%);
  }
}

.expertise-tabs__scroll::-webkit-scrollbar {
  display: none;
}

/* At wide desktop the eight pills reliably fit in one line (verified:
   compact pills + 10px gaps comfortably clear the content width at this
   tier), so the row can be centred as one coherent group instead of
   scrolling. Below this tier the row keeps its original left-anchored,
   naturally-scrollable behaviour — centring an overflowing scroll
   container risks clipping the start of the content with no way back to
   it in some browsers, so centring is only ever applied once nothing
   actually overflows. */
@media (min-width: 80rem) {
  .expertise-tabs__scroll {
    display: flex;
    justify-content: center;
  }
}

.expertise-tabs__list {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding-block: 4px;
}

/* Typography-scale test (2026-08-16): label size reduced from the
   --cb-text-body-size clamp (16-17px) to a flat 16px, matching the main
   site nav's own scale target — with padding trimmed proportionally so
   the pill doesn't read as loose around now-smaller text. Shape, gap,
   active state and border treatment are all unchanged; only size. This
   is a shared component (every capability's own pill uses the same
   class), so the size change is intentionally sitewide even though the
   content inside each tab is not. */
.expertise-tabs__tab {
  appearance: none;
  flex: 0 0 auto;
  border: none;
  background: var(--expertise-surface);
  cursor: pointer;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 16px;
  line-height: 1.2;
  color: var(--expertise-surface-text);
  padding: 9px 18px;
  border-radius: var(--cb-radius-pill);
  white-space: nowrap;
  transition: background-color 200ms var(--cb-ease-standard), color 200ms var(--cb-ease-standard);
}

/* Restrained hover — a quiet darkening of the same light-grey surface,
   never an outline. */
.expertise-tabs__tab:not(.is-active):hover {
  background: color-mix(in srgb, var(--cb-color-ink) 14%, var(--cb-color-paper));
  color: var(--cb-color-ink);
}

.expertise-tabs__tab.is-active {
  background: var(--cb-color-ink);
  color: var(--cb-color-paper);
}

@media (prefers-reduced-motion: reduce) {
  .expertise-tabs__tab {
    transition: none;
  }
}

/* DETAIL SECTION — one shared region (js/expertise.js repopulates it on
   every tab change), never eight duplicate sections. */
.expertise-detail {
  padding-top: 40px;
  padding-bottom: var(--cb-space-8);
}

@media (min-width: 50.0625rem) {
  .expertise-detail {
    padding-top: 56px;
  }
}

@media (min-width: 80rem) {
  .expertise-detail {
    padding-top: 72px;
    padding-bottom: var(--cb-space-9);
  }
}

/* V-2 (docs/FINAL_VISUAL_REVIEW.md) — shared vertical-balance rule for the
   7 simple capability pages only (Strategy/Brand/Web & Platforms/Social
   Media/Campaigns & Advertising/Customer Experience/Performance
   Marketing). AI & Workflows is deliberately excluded — its own #aiw
   wrapper is not part of this selector, so its richer layout/spacing is
   completely untouched.

   .expertise-tabs/.expertise-detail's own padding above is shared with
   AI & Workflows too, so it stays exactly as-is; this rule instead pulls
   the simple pages' own short H1 + copy block up out of part of that
   shared top gap (which reads as excessive against 2-3 short paragraphs)
   and gives it a roughly matching amount of breathing room below, so the
   block sits closer to vertically balanced within the available space
   before the footer rather than clustered high with an abrupt cutoff.
   Scoped to the ≥80rem tier only (1280px+) — 1280/1440/1728/1920 is
   exactly where this looked stranded; mobile and tablet already read
   correctly and are deliberately left unchanged. */
@media (min-width: 80rem) {
  .strat,
  .brand,
  .web,
  .sm,
  .camp,
  .cx,
  .perf {
    margin-top: calc(-1 * var(--cb-space-6)); /* -48px */
    padding-bottom: var(--cb-space-6); /* 48px */
  }
}

/* Restrained opacity + ~8px settle on every category change — brief:
   "a brief fade and approximately 6-10px movement is sufficient... do not
   animate every card independently". This one transition covers the whole
   panel (intro, visual and capability cards together), so nothing inside
   it needs individual entrance animation of its own. Same "armed, then
   triggered" two-class pattern used sitewide. */
.expertise-detail__panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--cb-ease-standard), transform 220ms var(--cb-ease-standard);
}

.expertise-detail__panel.is-entering {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .expertise-detail__panel {
    transition: opacity 220ms var(--cb-ease-standard);
  }

  .expertise-detail__panel.is-entering {
    transform: none;
  }
}

/* Editorial intro (left) stacks above the category visual (right) until
   there's genuinely enough width for both side by side — a two-column
   split any narrower than ≥64rem would leave both too cramped. */
.expertise-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cb-space-6);
}

@media (min-width: 64rem) {
  .expertise-detail__grid {
    grid-template-columns: 9fr 15fr;
    column-gap: var(--cb-space-7);
    align-items: start;
  }
}

/* LEFT — editorial category introduction. The category name is now a small
   uppercase eyebrow (reuses .label's own typography via the dual class
   applied in markup), never a large standalone heading — the headline is
   the section's real visual and semantic anchor. */
.expertise-detail__eyebrow {
  margin: 0;
}

.expertise-detail__headline {
  margin: var(--cb-space-3) 0 0;
  max-width: 20ch;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-page-heading-size);
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  color: var(--cb-color-ink);
}

.expertise-detail__body {
  margin: var(--cb-space-4) 0 0;
  max-width: 46ch;
  font-size: var(--cb-text-subheading-size);
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}

/* RIGHT — generic category visual, shown for every category still on the
   generic system (Strategy is now bespoke — see #strat-experience — so
   this no longer needs to share a grid cell with a Strategy-specific
   motion). A clearly labelled placeholder, not a final animation — no
   border/background beyond a quiet Line frame, no icons, no gradients. */
.category-visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cb-space-2);
  min-height: 260px;
  padding: var(--cb-space-5);
  text-align: center;
  border: var(--cb-border-width) solid var(--cb-color-line);
  border-radius: var(--cb-radius);
}

/* An author style always wins over the UA stylesheet's own
   `[hidden] { display: none }` regardless of specificity — required
   because of this element's own `display: flex` above. */
.category-visual[hidden] {
  display: none;
}

@media (min-width: 64rem) {
  .category-visual {
    min-height: 320px;
  }
}

.category-visual__label {
  margin: 0;
}

.category-visual__copy {
  margin: 0;
  max-width: 34ch;
  font-size: var(--cb-text-body-size);
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
}

/* CAPABILITY CARDS — now shared by every Expertise category (previously
   Strategy-only). Plain content, not navigation: static, non-interactive
   cards (title + description only). No arrow, no CTA, no modal trigger, no
   pointer cursor, no hover treatment that would imply clickability, no
   images. .expertise-capabilities carries the same .container class as
   .expertise-intro/.expertise-tabs above it, so this grid fills exactly
   the same inset content width as the rest of the page rather than
   stretching edge-to-edge or needing an extra max-width layered on top. */
.expertise-capabilities {
  margin-top: var(--cb-space-6);
}

@media (min-width: 50.0625rem) {
  .expertise-capabilities {
    margin-top: var(--cb-space-7);
  }
}

.expertise-capabilities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cb-space-4);
}

/* Tablet fallback (brief: "1024px: use 2x2 only if needed") — deliberately
   still 2 columns at 1024px itself, not yet 4: four columns any narrower
   than 80rem leaves each card too tight for a title + full sentence of
   description without every card wrapping to an uneven height. */
@media (min-width: 40rem) {
  .expertise-capabilities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wide desktop — the intended design: one complete row of equal-width
   cards, all fully visible, no carousel, no clipping. */
@media (min-width: 80rem) {
  .expertise-capabilities__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cb-space-5);
  }

  /* No current category has exactly three capabilities, but this keeps a
     three-card category correctly centred as a complete group instead of
     stretching unevenly across a track sized for four — brief: "do not
     stretch three cards awkwardly across the entire browser width". */
  .expertise-capabilities__grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    display: flex;
    justify-content: center;
  }

  .expertise-capabilities__grid:has(> :nth-child(3)):not(:has(> :nth-child(4)))
    .expertise-capabilities__card {
    flex: 0 1 280px;
  }
}

.expertise-capabilities__card {
  /* The exact homepage capability-circle grey (--capability-circle-bg in
     css/layout.css), reproduced here as --expertise-surface — see this
     file's own :root comment above. Not a new, visually-similar grey. */
  background: var(--expertise-surface);
  border-radius: var(--cb-radius-button);
  /* ~12-15% more compact than the first Strategy-only pass (32px/24px),
     per brief: "10-15% more compact vertically than the earlier oversized
     Strategy cards". */
  padding: 28px 20px;
}

.expertise-capabilities__card-title {
  margin: 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-subheading-size);
  line-height: var(--cb-text-subheading-leading);
  letter-spacing: var(--cb-text-subheading-tracking);
  color: var(--cb-color-ink);
}

.expertise-capabilities__card-description {
  margin: var(--cb-space-2) 0 0;
  font-size: var(--cb-text-body-size);
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
}

/* ============================================================
   SERVICE CARDS — progressive disclosure for the 7 simple capability
   pages (Strategy/Brand/Web & Platforms/Social Media/Campaigns &
   Advertising/Customer Experience/Performance Marketing). Title + "+"
   only; concrete detail lives in each card's own <template> and is read
   into the one shared modal below on click (js/expertise.js's
   initCapabilityCards). AI & Workflows is untouched — it has no
   .cap-cards markup and none of this applies to it.
   ============================================================ */
.cap-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: var(--cb-space-6) auto 0;
  max-width: 1160px;
}

@media (min-width: 50.0625rem) {
  .cap-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 80rem) {
  .cap-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

/* A real <button> (see markup) — semantics, Enter/Space and the shared
   sitewide button:focus-visible rule (css/base.css) all come for free,
   nothing extra needed here for keyboard support. */
.cap-card {
  appearance: none;
  border: none;
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  padding: 20px;
  background: var(--expertise-surface);
  border-radius: var(--cb-radius-card);
  cursor: pointer;
  transition: background-color 200ms var(--cb-ease-standard);
}

.cap-card:hover {
  background: color-mix(in srgb, var(--cb-color-ink) 14%, var(--cb-color-paper));
}

.cap-card__title {
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-subheading-size);
  line-height: var(--cb-text-subheading-leading);
  letter-spacing: var(--cb-text-subheading-tracking);
  color: var(--cb-color-ink);
}

.cap-card__plus {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cb-color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms var(--cb-ease-standard);
}

.cap-card__plus svg {
  width: 14px;
  height: 14px;
  color: var(--cb-color-ink);
}

/* Very subtle — a 45° rotation only, no scale/bounce, no layout shift
   (the circle's own box size never changes). */
.cap-card:hover .cap-card__plus,
.cap-card:focus-visible .cap-card__plus {
  transform: rotate(45deg);
}

.cap-card__detail {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cap-card,
  .cap-card__plus {
    transition: none;
  }
}

/* ============================================================
   SERVICE MODAL — one shared, centred dialog reused for every service
   card's detail on every capability page. Deliberately not the
   .project-drawer/.ws-drawer side-panel pattern — a short service
   description reads better centred. Structure/inert/focus-trap/backdrop
   mechanics mirror css/cookie-consent.css's .cookie-modal exactly (the
   established, already-accessible pattern for this kind of overlay on
   the public site), reproduced here rather than shared since the two
   components have no other reason to depend on each other.
   ============================================================ */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.service-modal[inert] {
  display: none;
}

.service-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cb-color-ink) 55%, transparent);
  opacity: 0;
  transition: opacity 220ms var(--cb-ease-standard);
}

.service-modal.is-open .service-modal__backdrop {
  opacity: 1;
}

.service-modal__panel {
  position: relative;
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  overflow: hidden;
  border-radius: var(--cb-radius-modal);
  background: var(--cb-color-paper);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 220ms var(--cb-ease-standard), transform 220ms var(--cb-ease-standard);
}

.service-modal.is-open .service-modal__panel {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .service-modal__backdrop,
  .service-modal__panel {
    transition: opacity 160ms var(--cb-ease-standard);
  }

  .service-modal__panel {
    transform: none;
  }
}

@media (max-width: 30rem) {
  .service-modal {
    padding: 0;
  }

  .service-modal__panel {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: var(--cb-radius-modal) var(--cb-radius-modal) 0 0;
  }
}

.service-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  appearance: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--expertise-surface);
  color: var(--cb-color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-modal__close:hover {
  background: color-mix(in srgb, var(--cb-color-ink) 14%, var(--cb-color-paper));
}

.service-modal__close svg {
  width: 16px;
  height: 16px;
}

.service-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 56px 40px 40px;
}

.service-modal__title {
  margin: 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-subheading-size);
  line-height: var(--cb-text-subheading-leading);
  letter-spacing: var(--cb-text-subheading-tracking);
  color: var(--cb-color-ink);
}

.service-modal__body {
  margin: var(--cb-space-4) 0 0;
  font-size: var(--cb-text-body-size);
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
}