/* ==========================================================================
   CBC — shared enterprise solution page system (mockup)
   Loaded by all five enterprise solution pages: the "How We Help" lateral
   accordion, the featured client story, Change at Scale, the Perspectives
   cards, and the CTA / footer treatment. Every selector is class-based, so
   the file is shared rather than duplicated per page.
   Accordion: one wide expanded panel on flat rust, four narrow vertical
   tabs. Stacks at <=900.
   CBC palette only. No gradients outside the Perspectives frames.
   No backdrop-filter.
   ========================================================================== */

.hwh-head {
  max-width: none;
  margin-bottom: clamp(var(--space-8), 3vw, var(--space-12));
}

.hwh {
  --hwh-tab: clamp(76px, 6vw, 104px);
  --hwh-rust: #a64a40;
  --hwh-rust-deep: #7f3831;
  --hwh-slate: #4f5e61;
  --hwh-collapsed: #f8f8f8;
  --hwh-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --hwh-dur: 600ms;
  --hwh-head-dur: 240ms;

  container-type: inline-size;
  display: flex;
  width: 100%;
  height: clamp(25rem, 22rem + 4vw, 28rem);
  border: 1px solid #ffffff;
  background: #ffffff;
  overflow: hidden;
  overflow-anchor: none;
}

.hwh__item {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  min-width: 0;
  background: transparent;
}

/* ---- Header button ------------------------------------------------------ */

.hwh__h {
  margin: 0;
  display: flex;
  flex: 0 0 auto;
  width: var(--hwh-tab);
  height: 100%;
  min-width: 0;
  overflow: hidden;
  opacity: 1;
  border-right: 1px solid #ffffff;
  background: var(--hwh-collapsed);
  will-change: width, opacity;
}

.hwh__btn {
  flex: 0 0 var(--hwh-tab);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: var(--space-4);
  width: var(--hwh-tab);
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-5) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--hwh-slate);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: none;
}

/* Collapsed tab: marker pinned top, label centred and reading bottom-to-top,
   number pinned bottom. The strip remains a separate layer from the reveal. */
.hwh__mark {
  grid-row: 1;
  margin-left: 0;
  color: var(--hwh-rust);
}

.hwh__label {
  grid-row: 2;
}

.hwh__num {
  grid-row: 3;
}

/* Dark mode: the open panel stays flat rust with white content — deliberate,
   the same way every rust band on the site behaves. Only the collapsed tabs
   re-theme so they stay readable on the dark surface. */
[data-theme='dark'] .hwh {
  --hwh-slate: #b9c4c6;
}

@media (prefers-color-scheme: no-preference-forced-off) {
  :root:not([data-theme='light']) .hwh {
    --hwh-slate: #b9c4c6;
  }
}

.hwh__btn:focus-visible {
  outline: 2px solid #000000;
  outline-offset: -4px;
}

.hwh__item[data-open='true']:has(.hwh__btn:focus-visible) .hwh__active-head {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

.hwh__num {
  flex: 0 0 auto;
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  color: var(--hwh-rust);
  font-variant-numeric: tabular-nums;
}

.hwh__label {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 1.0625rem;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
}

.hwh__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 100%;
  color: var(--hwh-rust);
}

/* Small plus/minus rule marker, so state is not carried by colour alone. */
.hwh__mark {
  flex: 0 0 auto;
  position: relative;
  width: 14px;
  height: 14px;
  margin-inline: 0;
  justify-self: center;
}

.hwh__mark::before,
.hwh__mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: none;
}

.hwh__mark::after {
  transform: rotate(90deg);
}

/* ---- Expanded panel ----------------------------------------------------- */

.hwh__panel {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  width: 0;
  height: 100%;
  color: #ffffff;
  padding: 0;
  background: var(--hwh-rust);
  overflow: hidden;
  contain: layout paint;
  visibility: hidden;
  pointer-events: none;
  will-change: width;
}

.hwh__item[data-open='true'] .hwh__panel {
  width: calc(100cqw - var(--hwh-tab) - var(--hwh-tab) - var(--hwh-tab) - var(--hwh-tab));
  visibility: visible;
  pointer-events: auto;
}

.hwh__item[data-open='true'] .hwh__h {
  width: 0;
  opacity: 0;
  border-right-width: 0;
}

.hwh__panel-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: calc(100cqw - var(--hwh-tab) - var(--hwh-tab) - var(--hwh-tab) - var(--hwh-tab));
  height: 100%;
  padding: clamp(var(--space-6), 2.4vw, var(--space-9)) clamp(var(--space-6), 2.6vw, var(--space-10)) clamp(var(--space-7), 2.6vw, var(--space-10));
}

.hwh__active-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  color: #ffffff;
}

.hwh__active-num {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  font-variant-numeric: tabular-nums;
}

.hwh__active-label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.75rem);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
}

.hwh__active-mark {
  position: relative;
  width: 14px;
  height: 14px;
}

.hwh__active-mark::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
}

.hwh__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  gap: 0;
  max-width: none;
}

.hwh__col {
  min-width: 0;
  padding: clamp(var(--space-3), 1vw, var(--space-5)) clamp(var(--space-5), 1.8vw, var(--space-8));
}

.hwh__col:first-child {
  padding-left: 0;
}

.hwh__col + .hwh__col {
  border-left: 1px solid rgb(255 255 255 / 0.48);
}

.hwh__p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--lh-relaxed);
  color: #ffffff;
  max-width: 48ch;
}

/* Shared five-link navigation below the Automotive and enterprise accordions. */
.hwh-solutions {
  padding-top: clamp(var(--space-8), 3.5vw, var(--space-12));
}

.hwh-solutions__title {
  margin: 0 0 var(--space-4);
}

.hwh-solutions__links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  gap: var(--space-2);
}

.hwh-solutions__link {
  width: 100%;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  border-radius: 100px;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

/* Automotive solution names vary sharply in length. Weight the desktop
   tracks to their rendered labels so People & Performance remains on one
   line without making the entire pill row taller. */
@media (min-width: 901px) {
  .automotive-howwehelp .hwh-solutions__links {
    grid-template-columns:
      minmax(0, 0.55fr)
      minmax(0, 0.68fr)
      minmax(0, 0.96fr)
      minmax(0, 0.98fr)
      minmax(0, 1.3fr);
  }

  .automotive-howwehelp .hwh-solutions__link {
    padding-inline: clamp(4px, 0.5vw, 12px);
    white-space: nowrap;
  }

  /* Construction solution labels are longer and more variable than the
     enterprise labels the automotive-howwehelp track weights were tuned for.
     Fall back to equal-width columns and let text wrap so nothing spills. */
  .construction-howwehelp .hwh-solutions__links {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .construction-howwehelp .hwh-solutions__link {
    padding-inline: clamp(6px, 0.7vw, 14px);
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(0.72rem, 0.62rem + 0.35vw, 0.82rem);
    letter-spacing: 0.06em;
    line-height: 1.15;
    min-height: 56px;
  }
}

/* ---- Mobile / stacked (<=900) ------------------------------------------- */

@media (max-width: 900px) {
  .hwh,
  .hwh--open-1,
  .hwh--open-2,
  .hwh--open-3,
  .hwh--open-4,
  .hwh--open-5 {
    container-type: normal;
    display: block;
    height: auto;
  }

  .hwh__item {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ffffff;
  }

  .hwh__item:last-child {
    border-bottom: 0;
  }

  .hwh__item[data-open='true'] {
    width: 100%;
  }

  .hwh__h,
  .hwh__item[data-open='true'] .hwh__h {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    border-right: 0;
  }

  .hwh__btn,
  .hwh__item[data-open='false'] .hwh__btn,
  .hwh__item[data-open='true'] .hwh__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    min-height: 56px;
    width: 100%;
    height: auto;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
  }

  .hwh__label {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 1.0625rem;
    max-height: none;
  }

  .hwh__mark {
    grid-row: auto;
    margin-top: 0;
    margin-left: auto;
    justify-self: auto;
  }

  .hwh__label,
  .hwh__num {
    grid-row: auto;
  }

  .hwh__item[data-open='true'] .hwh__h {
    background: var(--hwh-rust);
  }

  .hwh__item[data-open='true'] .hwh__btn,
  .hwh__item[data-open='true'] .hwh__num,
  .hwh__item[data-open='true'] .hwh__label,
  .hwh__item[data-open='true'] .hwh__mark {
    color: #ffffff;
  }

  .hwh__item[data-open='true'] .hwh__mark::after {
    transform: rotate(0deg);
  }

  /* Mobile panels are content-sized, not a fixed height: copy length differs
     per offering and per page, and a fixed height either clipped the closing
     link or left dead space. 0fr -> 1fr keeps the open/close transition.
     Engines without interpolable grid-template-rows simply snap. */
  .hwh__panel {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    height: auto;
    will-change: grid-template-rows;
    transition: grid-template-rows 420ms cubic-bezier(0.76, 0, 0.24, 1);
  }

  .hwh__panel-inner {
    grid-template-rows: auto auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-5) var(--space-6);
  }

  .hwh__active-head {
    display: none;
  }

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

  .hwh__col {
    padding: var(--space-4) 0;
  }

  .hwh__col + .hwh__col {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.48);
  }

  .hwh__p {
    max-width: none;
  }

  .hwh-solutions__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hwh-solutions__link:last-child {
    grid-column: 1 / -1;
  }

  .hwh__item[data-open='true'] .hwh__panel {
    width: 100%;
    height: auto;
    grid-template-rows: 1fr;
  }
}

/* Narrow desktop: preserve enough height for the two narrative columns as
   their available measure contracts. The >=1101px layout remains untouched. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .hwh {
    height: 29rem;
  }
}

@media (min-width: 960px) and (max-width: 1000px) {
  .hwh {
    height: 36rem;
  }
}

@media (min-width: 901px) and (max-width: 959px) {
  .hwh {
    height: 40rem;
  }
}

/* Enterprise statements must wrap within their columns at every width. The
   shared site stylesheet otherwise keeps these labels on one line at desktop. */
.gapfix__s {
  white-space: normal;
}

/* Enterprise CTA statements are deliberately concise enough to hold one line
   without condensing the type. The lede may still wrap naturally on mobile. */
.cta .cta__title {
  white-space: nowrap;
}

.cta .cta__lede {
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .hwh__panel,
  .hwh__mark::before,
  .hwh__mark::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   CLIENT OUTCOMES / FEATURED INSIGHT
   -------------------------------------------------------------------------- */

.client-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 29rem;
  background: #ffffff;
}

.client-story__media {
  position: relative;
  min-height: 29rem;
  overflow: hidden;
  background: #4f5e61;
}

.client-story__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55));
}

.client-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-story__sector {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 3vw, 44px);
  bottom: clamp(24px, 3vw, 40px);
  margin: 0;
  color: #ffffff;
  font-family: var(--font-eyebrow);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
}

.client-story__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 48px);
}

.client-story__label,
.perspective-card__kicker {
  display: block;
  color: #a64a40;
  font-family: var(--font-eyebrow);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
}

.client-story__label {
  margin: 0 0 var(--space-3);
}

.client-story__title {
  max-width: 20ch;
  margin: 0 0 var(--space-4);
  color: #000000;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.45rem + 1vw, 2.8rem);
  font-weight: var(--weight-light);
  line-height: 1.04;
  letter-spacing: var(--track-tight);
}

.client-story__body {
  max-width: 52ch;
  margin: 0;
  color: #4f5e61;
  font-size: 1.125rem;
  line-height: 1.62;
}

.client-story__results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-5) 0;
  border-block: 1px solid rgba(79, 94, 97, 0.24);
}

.client-story__results div {
  position: relative;
  min-width: 0;
  padding-inline: clamp(14px, 1.4vw, 22px);
}

.client-story__results div:first-child {
  padding-left: 0;
}

.client-story__results div:last-child {
  padding-right: 0;
}

.client-story__results div + div::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: rgba(79, 94, 97, 0.2);
}

.client-story__results dt {
  color: #a64a40;
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 1.25rem + 0.8vw, 2.35rem);
  font-weight: var(--weight-bold);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.client-story__results dd {
  margin-top: var(--space-3);
  color: #000000;
  font-family: var(--font-eyebrow);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  hyphens: none;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-story--insight {
  min-height: 24rem;
}

.client-story--insight .client-story__media {
  min-height: 24rem;
}

.client-story--insight .client-story__content {
  padding-block: clamp(28px, 2.4vw, 38px);
}

.client-story--insight .client-story__title {
  max-width: 24ch;
  font-size: clamp(1.75rem, 1.35rem + 0.8vw, 2.5rem);
  line-height: 1.08;
}

.client-story--insight .client-story__actions {
  margin-top: var(--space-6);
}

.client-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.client-story__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #000000;
  border-radius: 100px;
  font-family: var(--font-eyebrow);
  font-size: 0.82rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps-sm);
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--transition-interactive),
    border-color var(--transition-interactive),
    color var(--transition-interactive);
}

.client-story__link--primary {
  background: #000000;
  color: #ffffff;
}

.client-story__link--secondary {
  background: transparent;
  color: #000000;
}

.client-story__link svg {
  transition: transform var(--transition-interactive);
}

.client-story__link--primary:hover,
.client-story__link--primary:focus-visible {
  background: #a64a40;
  border-color: #a64a40;
  color: #ffffff;
}

.client-story__link--secondary:hover,
.client-story__link--secondary:focus-visible {
  background: transparent;
  border-color: #a64a40;
  color: #a64a40;
}

.client-story__link:hover svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .client-story {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-story__media {
    min-height: 22rem;
  }

  .client-story__content {
    padding-block: var(--space-10);
  }

  .client-story--insight .client-story__media {
    min-height: 18rem;
  }

  .client-story--insight .client-story__content {
    padding-block: var(--space-8);
  }
}

@media (max-width: 640px) {
  .client-story__media {
    min-height: 15rem;
  }

  .client-story__content {
    padding: var(--space-8) var(--space-6);
  }

  .client-story--insight .client-story__media {
    min-height: 12.5rem;
  }

  .client-story--insight .client-story__content {
    padding: var(--space-6);
  }

  .client-story__results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: var(--space-4);
  }

  .client-story__results div {
    display: block;
    padding-inline: 12px;
  }

  .client-story__results div:first-child {
    padding-left: 0;
  }

  .client-story__results div:last-child {
    padding-right: 0;
  }

  .client-story__results dt {
    font-size: clamp(1.45rem, 6vw, 1.75rem);
  }

  .client-story__results dd {
    margin-top: var(--space-2);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
  }

  .client-story__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .client-story__link {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   PERSPECTIVES — IMAGE-LED EDITORIAL CARDS
   -------------------------------------------------------------------------- */

.perspective-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.perspective-card {
  position: relative;
  display: block;
  min-width: 0;
  /* The card is its own query container, so the kicker, the two-line title and
     the two-line description scale with the card rather than the viewport.
     That keeps the characters-per-line budget constant at every breakpoint,
     which is what lets the approved copy hold exactly two lines in a 3-column
     row, a 2-column row and a single full-bleed column alike. */
  container-type: inline-size;
  /* Shortened editorial card. Was 4 / 5 (569px tall at 1512). 8 / 7 reads as a
     wide-ish landscape frame that suits the 16:9 source images, and the
     min-height floor guarantees the kicker / title / action stack still has
     room at narrower 3-column widths. */
  /* width:100% is required alongside min-height: without it the aspect-ratio
     can resolve the inline size from the floored block size and overflow the
     grid column. */
  width: 100%;
  aspect-ratio: 8 / 7;
  min-height: 384px;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
}

.perspective-card__field,
.perspective-card__field img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.perspective-card__field img {
  object-fit: cover;
  filter: brightness(1);
  transform: scale(1.01);
  transition:
    filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.perspective-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.perspective-card::before {
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.05) 8%,
    rgb(0 0 0 / 0.18) 38%,
    rgb(0 0 0 / 0.9) 100%
  );
}

.perspective-card__panel {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 6.4cqw, 34px);
  padding-bottom: clamp(16px, 5cqw, 26px);
}

.perspective-card__panel::before,
.perspective-card__panel::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition:
    background-color var(--transition-interactive),
    border-color var(--transition-interactive),
    color var(--transition-interactive);
}

.perspective-card__panel::before {
  content: "";
  top: clamp(18px, 1.65vw, 26px);
  right: clamp(18px, 1.65vw, 26px);
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: transparent;
}

.perspective-card__panel::after {
  content: "\2192";
  top: clamp(18px, 1.65vw, 26px);
  right: clamp(18px, 1.65vw, 26px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}

.perspective-card__kicker {
  margin-bottom: clamp(8px, 2.6cqw, 14px);
  color: rgb(255 255 255 / 0.86);
  font-family: var(--font-body);
  font-size: clamp(0.66rem, 2.4cqw, 0.82rem);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Standardized two-line card text blocks.

   Both the title and the description reserve exactly two line boxes, sized
   from their own line-height, so every card in a row has the same text block
   height and rows stay aligned. The line composition is authored in
   tools/editorial_portfolio.py and emitted as two `.cardline` spans, so there
   is no truncation, no ellipsis, no clamped third line and no per-card font
   override anywhere in the system. If a line stops fitting, the copy is
   edited — see the card copy contract in that module. */
.perspective-card__title {
  display: block;
  max-width: none;
  margin-bottom: 0;
  color: #ffffff;
  font-family: 'Switzer', sans-serif;
  font-size: clamp(0.875rem, 4.35cqw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  height: calc(1.25em * 2);
  letter-spacing: -0.01em;
  transition: color var(--transition-interactive);
}

.perspective-card__desc {
  display: block;
  margin-top: clamp(6px, 2cqw, 10px);
  color: rgb(255 255 255 / 0.84);
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 3.35cqw, 0.95rem);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  height: calc(1.4em * 2);
}

.perspective-card__title .cardline,
.perspective-card__desc .cardline {
  display: block;
}

.perspective-card__arrow {
  display: none;
}

.perspective-card:hover .perspective-card__field img,
.perspective-card:focus-visible .perspective-card__field img {
  filter: brightness(0.86);
  transform: scale(1.045);
}

.perspective-card:hover .perspective-card__title,
.perspective-card:focus-visible .perspective-card__title {
  color: #ffffff;
}

.perspective-card:hover .perspective-card__panel::before,
.perspective-card:focus-visible .perspective-card__panel::before {
  border-color: #ffffff;
  background: #ffffff;
}

.perspective-card:hover .perspective-card__panel::after,
.perspective-card:focus-visible .perspective-card__panel::after {
  color: #000000;
}

@media (max-width: 1024px) {
  .perspective-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  /* Single column: the card is now full-bleed wide, so a flatter ratio keeps it
     from becoming a tall block. Floor still protects the text stack at 320px. */
  .perspective-card {
    aspect-ratio: 16 / 13;
    min-height: 340px;
  }

  /* Single column: the card is wide, so the container-query type sizes up on
     its own. Nothing to override here beyond the frame ratio above. */
}

@media (prefers-reduced-motion: reduce) {
  .perspective-card__field img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   BODY COPY STANDARD
   Narrative copy on this Strategy mockup uses a consistent readable scale.
   Headings, eyebrows, navigation, buttons, metadata and accordion controls
   retain their existing typographic hierarchy.
   -------------------------------------------------------------------------- */

.gapfix__n,
.hwh__p,
.cell__note,
.infeat__excerpt {
  font-size: 18px;
  font-weight: var(--weight-regular);
}

.gapfix__n {
  font-size: 20px;
}

.hwh__p {
  font-size: 20px;
}

@media (max-width: 1160px) {
  .gapfix__e--fix {
    margin-top: var(--space-10);
  }
}

/* --------------------------------------------------------------------------
   CHANGE AT SCALE
   Uses the same fixed five-cell / ink-reveal system as the Construction
   Industries row. The first cell is the current page, so its reveal remains
   visible on pointer layouts and it does not imply a redundant link.
   -------------------------------------------------------------------------- */

.change-scale__current {
  cursor: default;
}

.change-scale__current .indcell__reveal {
  opacity: 0;
}

.change-scale__current:hover .indcell__reveal,
.change-scale__current:focus .indcell__reveal,
.change-scale__current:focus-visible .indcell__reveal {
  opacity: 0;
}

.change-scale__current .indcell__rest {
  opacity: 1;
}

.change-scale__current .indcell__rest .indcell__title {
  color: #A64A40;
}

/* SEI-style capsule geometry for outbound controls on this page. SEI's live
   CTAs use a 40-100px radius and a 1px outline; the existing CBC colours,
   type and vertical sizing remain intact. */
/* The header bar CTA and the mobile panel CTA now take the shared pill token
   from site.css. Restating them here also reached every page that loads this
   sheet, so removing them keeps the navigation on one shared rule. */
.sectionfoot .btn,
.cta__actions .btn {
  border-radius: 100px;
}

.change-scale.indrow--ink .indcell__reveal {
  background-image: none;
  background-color: #A64A40;
}

.change-scale.indrow--ink.indrow--ink .indcell__reveal .indcell__num,
.change-scale.indrow--ink.indrow--ink .indcell__reveal .indcell__title {
  color: #FFFFFF;
}

.change-scale.indrow--ink.indrow--ink .indcell__reveal .indcell__body {
  color: #FFFFFF;
}

.change-scale__copy {
  display: block;
}

.change-scale__copy--compact {
  display: none;
}

@media (min-width: 1201px) and (max-width: 1300px) {
  .change-scale__copy--wide {
    display: none;
  }

  .change-scale__copy--compact {
    display: block;
  }
}

.change-scale.indrow--ink.indrow--ink .indcell__reveal .indcell__attr {
  color: #FFFFFF;
}

.change-scale.indrow--ink.indrow--ink .indcell__reveal .indcell__arrow {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   LATEST INSIGHTS
   Equal editorial columns derived from the Bain reference: image first,
   rust category, strong headline, concise standfirst and quiet vertical rules.
   -------------------------------------------------------------------------- */

.latest-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.latest-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-6) clamp(var(--space-5), 1.6vw, var(--space-8)) var(--space-8);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
}

.latest-card:not(:first-child)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--color-divider);
  pointer-events: none;
}

.latest-card__media {
  display: block;
  overflow: hidden;
  width: calc(25cqw - (2 * clamp(var(--space-5), 1.6vw, var(--space-8))));
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-6);
  background: var(--color-surface-2);
}

.latest-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.latest-card__body,
.latest-card__kicker,
.latest-card__title,
.latest-card__excerpt {
  display: block;
}

.latest-card__body {
  flex: 1;
}

.latest-card__kicker {
  margin-bottom: var(--space-3);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: #A64A40;
}

.latest-card__title {
  margin-bottom: var(--space-4);
  font-family: inherit;
  font-size: clamp(1.18rem, 1.05rem + 0.25vw, 1.38rem);
  font-weight: var(--weight-bold);
  line-height: 1.28;
  text-wrap: pretty;
  transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.latest-card__excerpt {
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-ink);
  text-wrap: pretty;
}

@media (hover: hover) {
  .latest-card:hover .latest-card__media img {
    transform: scale(1.035);
  }

  .latest-card:hover .latest-card__title {
    color: #A64A40;
  }
}

.latest-card:focus-visible {
  outline: 3px solid #A64A40;
  outline-offset: 4px;
}

.latest-card:focus-visible .latest-card__title {
  color: #A64A40;
}

@media (prefers-reduced-motion: reduce) {
  .latest-card__media img {
    transition: none;
  }

  .latest-card__title {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-card {
    padding: var(--space-8);
    border-bottom: 1px solid var(--color-divider);
  }

  .latest-card__media {
    width: calc(50cqw - (2 * var(--space-8)));
  }

  .latest-card:nth-child(odd) {
    border-left: 0;
  }

  .latest-card:nth-child(odd)::before {
    display: none;
  }

  .latest-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

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

  .latest-card,
  .latest-card:first-child,
  .latest-card:last-child,
  .latest-card:nth-child(odd),
  .latest-card:nth-child(even) {
    padding: var(--space-8) 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .latest-card::before {
    display: none;
  }

  .latest-card:last-child {
    border-bottom: 0;
  }

  .latest-card__media {
    width: 100cqw;
  }

  .latest-card__kicker {
    font-size: 0.9375rem;
  }

  .latest-card__title {
    font-size: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
   CTA AND FOOTER
   The close mirrors the light-grey hero, then resolves to a white footer.
   -------------------------------------------------------------------------- */

.cta {
  background: #F1F2F2;
  color: #000000;
}

.cta .cta__title {
  color: #000000;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 1.55vw, 2.75rem);
  font-weight: 500;
  text-transform: none;
}

.cta .cta__title .accent {
  color: #A64A40;
}

.cta .cta__lede {
  color: #4F5E61;
}

.cta__actions .btn--inverse {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.cta__actions .btn--inverse:hover,
.cta__actions .btn--inverse:focus-visible {
  background: #A64A40;
  border-color: #A64A40;
  color: #FFFFFF;
}

.cta__actions .btn--inverse-ghost {
  background: transparent;
  border-color: #000000;
  color: #000000;
}

.cta__actions .btn--inverse-ghost:hover,
.cta__actions .btn--inverse-ghost:focus-visible {
  background: transparent;
  border-color: #A64A40;
  color: #A64A40;
}