/* ==========================================================================
   Collabrum Advisory — Page section compositions
   Section padding values are the reference's measured top/bottom pairs.
   ========================================================================== */

/* ==========================================================================
   Hero — reference pad 265/110, h2 70px, full-bleed image band beneath
   ========================================================================== */

.hero {
  position: relative;
  background: var(--color-deep);
  color: var(--on-deep-muted);
  isolation: isolate;
  overflow: hidden;
}

/* The photograph is the hero background, veiled enough for white type to hold
   its contrast at every viewport. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(var(--color-deep-rgb), .94) 0%,
      rgba(var(--color-deep-rgb), .88) 45%,
      rgba(var(--color-deep-rgb), .96) 100%),
    radial-gradient(900px 520px at 88% 6%, rgba(var(--color-secondary-rgb), .26), transparent 60%);
}

.hero__inner { padding-block: 230px 110px; }

/* Marquee and stats sit below the photograph on the solid fill. */
.hero__tail { position: relative; background: var(--color-deep); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 566px);
  gap: 70px;
  align-items: start;
}

.hero__title {
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  color: var(--color-white);
}

.hero__aside { padding-left: 70px; border-left: 1px solid var(--on-deep-border); }

.hero__lead {
  margin: 0 0 34px;
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--on-deep-muted);
}

.hero__rule {
  border: 0;
  border-top: 1px solid var(--on-deep-border);
  margin: 0 0 38px;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}

.hero__proof { text-align: center; }
.hero__proof p { margin: 10px 0 0; font-size: var(--text-sm); }

.hero__media {
  position: relative;
  aspect-ratio: 1600 / 620;
  overflow: hidden;
}

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

/* ==========================================================================
   Hero tail — moving text line, then the bracketed stat row.
   Both sit inside the hero on the deep fill, as in the reference.
   ========================================================================== */

.hero__marquee {
  --marquee-gap: 60px;
  padding-block: 40px;
  border-top: 1px solid var(--on-deep-border);
  overflow: hidden;
}

.hero__marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  font-size: 32px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--color-white);
  white-space: nowrap;
}

.hero__marquee-item svg {
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--color-white);
}

/* ==========================================================================
   Stat row — one component, used by the hero and any page section.
   Reference treatment: the number sits in a three-sided bracket with accent
   corner ticks, columns separated by hairlines, label centred beneath.
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  position: relative;
  padding-inline: 30px;
  text-align: center;
}

.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-border);
}

/* The reference's frames are a consistent 195px because every value there is
   short. A four-digit value needs more room, so the frame holds 195px as a
   floor and grows only for the one number that asks for it — the alternative
   is either a clipped value or three needlessly airy frames. */
.stat__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: fit-content;
  min-width: 195px;
  max-width: 100%;
  margin: 0 auto 26px;
  padding: 26px 24px 20px;
  border: 1px solid var(--color-border);
  border-bottom-color: transparent;
}

.stat__frame::before,
.stat__frame::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
}

.stat__frame::before { top: -3px; right: -3px; }
.stat__frame::after  { bottom: -3px; left: -3px; }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-deep);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--color-text);
}

/* On a deep fill */
.stats--deep .stat + .stat::before { background: var(--on-deep-border); }
.stats--deep .stat__frame { border-color: rgba(255, 255, 255, .16); border-bottom-color: transparent; }
.stats--deep .stat__value { color: var(--color-white); }
.stats--deep .stat__label { color: var(--on-deep-muted); }

/* Hero placement */
.hero__stats { padding-block: 60px 80px; }

/* ==========================================================================
   Section head — heading left, supporting copy + CTA right
   ========================================================================== */

.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 674px);
  gap: 60px;
  align-items: end;
  margin-bottom: 56px;
}

.head-split__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding-top: 26px;
  border-top: var(--hairline);
}

.head-split__aside p { margin: 0; }

/* ==========================================================================
   Services — tabbed panel
   ========================================================================== */

/* Tabs sit on a hairline, sized to their own content and spread across the row
   — the active one merges into the rule beneath it rather than filling its
   whole grid cell, which is what made it read as a slab. */
.tabs__list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  padding-bottom: 0;
}

.tabs__list::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--color-border);
}

.tabs__tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  text-align: center;
  padding: 17px 24px;
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

.tabs__tab:hover {
  color: var(--color-deep);
  border-color: var(--color-deep);
}

.tabs__tab[aria-selected="true"] {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--color-white);
  font-weight: var(--fw-medium);
}

/* A small amber tick on the active tab, echoing the stat frames. */
.tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
}

.tabs__panel {
  padding-top: 70px;
  animation: tab-in var(--dur-slow) var(--ease-out) both;
}

.tabs__panel[hidden] { display: none; }

@keyframes tab-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs__panel { animation: none; }
}

.service-panel {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.service-panel__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 30px;
  color: var(--color-deep);
}

.service-panel__title { margin-bottom: 18px; font-size: var(--text-2xl); color: var(--color-deep); }
.service-panel__text  { margin: 0 0 34px; }

.service-panel__split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-top: 34px;
  border-top: var(--hairline);
}

.service-panel__list { margin-bottom: 30px; }
.service-panel__thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.service-panel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-panel__media { aspect-ratio: 3 / 4; overflow: hidden; }
.service-panel__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   About — full-bleed band with overlapping stat tiles
   ========================================================================== */

.about-band { position: relative; }

.about-band__media {
  aspect-ratio: 1600 / 520;
  overflow: hidden;
}

.about-band__media img { width: 100%; height: 100%; object-fit: cover; }

.about-band__tiles {
  position: absolute;
  right: 0;
  bottom: -70px;
  display: flex;
}

.about-band__stat {
  padding: 40px 44px;
  background: rgba(var(--color-deep-rgb), .78);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  min-width: 270px;
}

.about-band__stat-value {
  font-size: var(--text-4xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-white);
}

.about-band__stat p { margin: 14px 0 0; color: var(--on-deep-muted); font-size: var(--text-sm); }

/* A brand plate, not a colour block: the original full-colour mark on white
   reads at a glance, where the white knockout on amber measured about 2:1. */
.about-band__logo {
  display: grid;
  place-items: center;
  width: 270px;
  padding: 30px;
  background: var(--color-white);
}

.about-band__logo img { width: 170px; height: auto; }

.about-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 674px);
  gap: 80px;
  padding-top: 140px;
}

.about-cols__left { padding-right: 60px; border-right: var(--hairline); }

.pillar { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 34px; }
.pillar + .pillar { margin-top: 46px; }

/* The label sizes to its own text and takes the same 26px offset as the body,
   so both start on the same line. Left to stretch, it inherited each pillar's
   height and the two labels landed at different offsets from their rules. */
.pillar__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: start;
  align-self: start;
  margin-top: 26px;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--color-deep);
  white-space: nowrap;
}

.pillar__body { padding-top: 26px; border-top: var(--hairline); }
.pillar__body p { margin: 0; }

/* ==========================================================================
   Features — 3-up then image + counter
   ========================================================================== */

.feature-row {
  padding-bottom: 56px;
  border-bottom: var(--hairline);
  margin-bottom: 70px;
}

.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.feature-split__media { aspect-ratio: 4 / 3; overflow: hidden; }
.feature-split__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-split__body { padding-left: 70px; border-left: var(--hairline); }

.feature-split__value {
  display: block;
  margin-bottom: 18px;
  font-size: 76px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-deep);
}

.feature-split__title { margin-bottom: 20px; font-size: var(--text-2xl); color: var(--color-deep); }
.feature-split__text  { margin: 0 0 34px; }

/* ==========================================================================
   Case studies — edge-to-edge tiles on the deep fill
   ========================================================================== */

.cases__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-block: 85px 70px;
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* ==========================================================================
   Process
   ========================================================================== */

.process__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
  padding: 18px 40px;
  border: var(--hairline);
  border-radius: var(--radius-pill);
}

.process__note p { margin: 0; }

/* ==========================================================================
   Tally Xcelerator partner band
   ========================================================================== */

.partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: 80px;
  align-items: center;
  padding-block: var(--section-pad);
}

.partner__marks {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--on-deep-border);
}

/* Tally's mark is dark navy artwork and disappears on the deep fill. It sits
   on a white plate rather than being recoloured, so the trademark is shown
   unmodified — the usual treatment for a partner badge. */
.partner__plate {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  background: var(--color-white);
  border-radius: 6px;
}

.partner__plate img { height: 38px; width: auto; }

.partner__badge {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--on-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.partner__visual { display: grid; place-items: center; }
.partner__visual img { width: 100%; max-width: 560px; height: auto; }

/* ==========================================================================
   Industries
   ========================================================================== */

.industries {
  position: relative;
  padding-block: var(--section-pad);
  overflow: hidden;
}

.industries__globe {
  position: absolute;
  left: -180px;
  bottom: -200px;
  width: 620px;
  height: 620px;
  opacity: .35;
  pointer-events: none;
}

.industries__rows { display: grid; gap: 22px; margin-block: 56px; }

.industries__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 60px;
}

.testimonial {
  padding: 44px 38px;
  border: var(--hairline);
  height: 100%;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 90px;
  align-items: start;
  padding-block: var(--section-pad);
}

.faq__intro p { margin: 24px 0 34px; }

/* ==========================================================================
   Insights
   ========================================================================== */

.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* ==========================================================================
   Contact CTA — deep panel overlapping a photo, form card on the right
   ========================================================================== */

.contact-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 590px);
  align-items: stretch;
  background: var(--color-deep);
  isolation: isolate;
}

.contact-cta__media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  z-index: -1;
}

.contact-cta__media img { width: 100%; height: 100%; object-fit: cover; }

/* Full-bleed like the reference: the deep panel runs to the left edge, the
   form card to the right. Inner text still lines up with the container. */
.contact-cta__panel {
  align-self: end;
  padding: 60px 70px 90px max(var(--container-pad), (100vw - var(--container)) / 2);
  color: var(--on-deep-muted);
}

.contact-cta__title { font-size: var(--text-3xl); color: var(--color-white); }

.contact-cta__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--on-deep-border);
}

.contact-cta__form {
  align-self: center;
  padding: 54px 50px;
  background: var(--color-white);
  box-shadow: var(--shadow-panel);
}

.contact-cta__form h3 { margin-bottom: 16px; font-size: var(--text-2xl); color: var(--color-deep); }

.form-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
  font-size: var(--text-sm);
}

.form-proof span { display: inline-flex; align-items: center; gap: 7px; }
.form-proof svg { width: 16px; height: 16px; color: var(--color-secondary); stroke-width: 2.5; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid .field--full { grid-column: 1 / -1; }

/* ==========================================================================
   Inner-page compositions
   ========================================================================== */

/* Reference: 924 / 396 with the 20px gutter, inside the 1340 container. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: var(--gap);
  align-items: start;
}

.sidebar { position: sticky; top: 110px; display: grid; gap: var(--gap); }

.sidebar__card { padding: 34px 30px; border: var(--hairline); }
.sidebar__card--deep { background: var(--color-deep); color: var(--on-deep-muted); border-color: transparent; }
.sidebar__card--deep h3 { color: var(--color-white); }
.sidebar__title { margin-bottom: 22px; font-size: var(--text-xl); color: var(--color-deep); }

.sidebar__nav li + li { margin-top: 4px; }

.sidebar__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  background: var(--color-gray);
  color: var(--color-heading);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.sidebar__nav a:hover,
.sidebar__nav a[aria-current] { background: var(--color-deep); color: var(--color-white); }
.sidebar__nav svg { width: 16px; height: 16px; flex: 0 0 auto; }

.prose h2 { margin: 48px 0 20px; font-size: var(--text-2xl); color: var(--color-deep); }
.prose h3 { margin: 36px 0 16px; font-size: var(--text-xl); color: var(--color-deep); }
.prose p  { margin: 0 0 20px; }
.prose ul { margin: 0 0 24px; }
.prose > :first-child { margin-top: 0; }

.grid-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-cases    { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-posts    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.case-card { position: relative; display: block; overflow: hidden; aspect-ratio: 67 / 60; }
.case-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.case-card:hover img { transform: scale(1.12); }

.case-card__body {
  position: absolute;
  inset: auto 30px 30px 30px;
  padding: 28px 30px;
  background: var(--color-white);
  transition: background var(--dur-base) var(--ease);
}

.case-card:hover .case-card__body { background: var(--color-primary); }
.case-card__eyebrow { font-size: var(--text-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-secondary); }
.case-card:hover .case-card__eyebrow { color: var(--on-primary); }
.case-card__title { margin-top: 6px; font-size: var(--text-xl); color: var(--color-deep); }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.contact-details li + li { margin-top: 32px; }

.map {
  aspect-ratio: 1440 / 430;
  border: 0;
  width: 100%;
  filter: grayscale(1) contrast(1.05);
}

/* ==========================================================================
   Tally Xcelerator page
   ========================================================================== */

.section--tint { background: var(--color-surface); }

.tx-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: 80px;
  align-items: center;
}

.tx-intro__logo { width: 120px; height: auto; margin-bottom: 30px; }
.tx-intro__visual { display: grid; place-items: center; }
.tx-intro__visual img { width: 100%; max-width: 580px; height: auto; }

.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.audience {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 44px;
  border: var(--hairline);
  background: var(--color-white);
}

.audience p { margin: 0 0 8px; }

.audience__tag {
  align-self: flex-start;
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--color-deep);
}

.audience__title { font-size: var(--text-2xl); color: var(--color-deep); }

.audience--deep {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--on-deep-muted);
}

.audience--deep .audience__title { color: var(--color-white); }
.audience--deep .audience__tag { color: var(--color-white); border-color: var(--on-deep-border); }
.audience--deep .checklist svg { color: var(--color-primary); }

.tx-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 80px;
  align-items: center;
}

.tx-why__stat .stat { padding-inline: 0; }

@media (max-width: 1024px) {
  .tx-intro, .tx-why { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 767px) {
  .audience-grid { grid-template-columns: minmax(0, 1fr); }
  .audience { padding: 36px 26px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .hero__inner   { padding-block: 220px 90px; }
  .hero__grid    { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; }
  .hero__aside   { padding-left: 48px; }
  .head-split    { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 40px; }
  .about-cols    { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; }
  .feature-split { gap: 56px; }
  .feature-split__body { padding-left: 48px; }
  .partner       { gap: 56px; }
  .faq           { gap: 60px; }
  .article-layout{ grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 1024px) {
  .hero__inner { padding-block: 150px 80px; }

  /* Four tabs will not share one row on a tablet: two by two instead. */
  .tabs__list { flex-wrap: wrap; }
  .tabs__tab { flex: 1 1 calc(50% - var(--gap)); }

  .hero__grid,
  .head-split,
  .about-cols,
  .feature-split,
  .partner,
  .faq,
  .contact-cta,
  .service-panel,
  .contact-grid,
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hero__aside,
  .about-cols__left,
  .feature-split__body {
    padding: 0;
    border: 0;
  }

  .about-cols { padding-top: 120px; }

  .contact-cta__panel { padding: 60px 0 70px; }
  .contact-cta__media { height: 42%; }
  .contact-cta__form  { margin-bottom: 60px; }

  .cases__grid,
  .testimonials__grid,
  .insights__grid,
  .grid-services,
  .grid-posts { grid-template-columns: repeat(2, 1fr); }

  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .stat:nth-child(3)::before { display: none; }

  .sidebar { position: static; grid-template-columns: repeat(2, 1fr); }

  .about-band__tiles { position: static; margin-top: 0; }
  .about-band__stat, .about-band__logo { flex: 1 1 50%; min-width: 0; }
}

@media (max-width: 767px) {
  .hero__inner { padding-block: 120px 64px; }
  .hero__actions { flex-direction: column; align-items: flex-start; }

  .hero__marquee-item { font-size: 22px; gap: 36px; }
  .hero__marquee-item svg { width: 30px; }
  .stat__frame { min-width: 0; width: 100%; max-width: 240px; }
  .stat__value { font-size: 48px; }

  .service-panel__split { grid-template-columns: minmax(0, 1fr); }
  .head-split__aside { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }

  .cases__head { flex-direction: column; align-items: flex-start; padding-block: 64px 40px; }

  .feature-split__value { font-size: 58px; }

  .about-cols { padding-top: 80px; }
  .pillar { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pillar__label { writing-mode: horizontal-tb; transform: none; }

  .tabs__list { flex-direction: column; align-items: stretch; gap: 10px; }
  .tabs__list::after { display: none; }
  .tabs__tab { text-align: left; white-space: normal; }

  .contact-cta__rows { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact-cta__form { padding: 40px 28px; }

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

@media (max-width: 560px) {
  .cases__grid,
  .testimonials__grid,
  .insights__grid,
  .grid-services,
  .grid-posts,
  
  .sidebar { grid-template-columns: minmax(0, 1fr); }

  .stats { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .stat::before { display: none !important; }

  .about-band__tiles { flex-direction: column; }
  .about-band__logo { width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}