.fabric-landing-page {
  --fabric-orange: #f99f3f;
  --fabric-navy: #000e3c;
  --fabric-blue: #003e73;
  --fabric-teal: #00abb6;
  --fabric-mist: #f3f6f9;
}

.fabric-landing-page.group-devops { --fabric-orange: #a967aa; }
.fabric-landing-page.group-data { --fabric-orange: #00abb6; }
.fabric-landing-page.group-analytics { --fabric-orange: #f99f3f; }

.fabric-landing-page .page-header__hero-content__header {
  max-width: 18ch;
  font-size: clamp(4rem, 4.4vw, 7.2rem);
  line-height: .98;
  text-wrap: balance;
}

.fabric-landing-page .page-header__hero-content__intro {
  max-width: 58rem;
}

.fabric-landing-page .service-hero-action .button--default,
.fabric-landing-page .fabric-cta {
  width: auto;
  min-width: min(100%, 29rem);
  background: var(--fabric-orange) !important;
  color: var(--fabric-navy) !important;
}

.fabric-landing-page .service-hero-action .button--default span,
.fabric-landing-page .fabric-cta span {
  color: inherit !important;
}

.fabric-landing-page .service-hero-action__note {
  max-width: 42rem;
  font-size: 1.8rem;
}

.fabric-outcomes,
.fabric-review,
.fabric-approach,
.fabric-proof,
.fabric-enquiry {
  padding: clamp(5.2rem, 5vw, 8rem) 0;
}

.fabric-outcomes h2,
.fabric-review h2,
.fabric-approach h2,
.fabric-proof h2,
.fabric-enquiry h2 {
  max-width: 90rem;
  margin-bottom: 1.8rem;
}

.fabric-section-lead,
.fabric-review__intro > p:not(.cb__kicker),
.fabric-approach__heading > p:not(.cb__kicker),
.fabric-proof__layout > div > p:not(.cb__kicker),
.fabric-enquiry__intro > p:not(.cb__kicker) {
  max-width: 76rem;
  color: #42536a;
  font-size: clamp(2rem, 1.6vw, 2.6rem);
  line-height: 1.45;
}

.fabric-outcome-grid {
  display: grid;
  gap: 2rem;
  margin-top: clamp(4rem, 4vw, 6.4rem);
}

.fabric-outcome {
  position: relative;
  padding: 3.2rem;
  border: 1px solid #d7e1ea;
  border-top: .5rem solid var(--fabric-orange);
  border-radius: 0 0 2rem 2rem;
  background: #fff;
}

.fabric-outcome > span {
  display: block;
  margin-bottom: 2.4rem;
  color: var(--fabric-orange);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.fabric-outcome h3 { margin-bottom: 1rem; }
.fabric-outcome p { margin: 0; color: #42536a; }

.fabric-review {
  scroll-margin-top: 12rem;
  color: #fff;
  background:
    linear-gradient(108deg, rgba(0, 62, 115, .96) 0 29%, rgba(0, 37, 86, .98) 29% 72%, rgba(0, 14, 60, 1) 72% 100%);
}

.fabric-review .cb__kicker,
.fabric-approach .cb__kicker,
.fabric-enquiry .cb__kicker { color: var(--fabric-orange); }
.fabric-review h2,
.fabric-review__intro > p:not(.cb__kicker) { color: #fff; }

.fabric-review__layout {
  display: grid;
  gap: clamp(4rem, 6vw, 9rem);
  align-items: center;
}

.fabric-review__intro .fabric-cta { margin-top: 3.2rem; }

.fabric-review__deliverables {
  padding: clamp(3.2rem, 4vw, 5.2rem);
  border: 1px solid color-mix(in srgb, var(--fabric-orange) 55%, transparent);
  border-radius: 2.4rem;
  background: rgba(0, 4, 52, .62);
  box-shadow: 0 2rem 5rem rgba(0, 4, 52, .24);
}

.fabric-review__label {
  margin-bottom: .8rem;
  color: var(--fabric-orange);
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
}

.fabric-review__deliverables > p:not(.fabric-review__label) { color: rgba(255, 255, 255, .82); }
.fabric-review__deliverables ul { margin: 2.8rem 0 0; padding: 0; list-style: none; }
.fabric-review__deliverables li {
  position: relative;
  padding: 1.4rem 0 1.4rem 3.2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.fabric-review__deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.1rem;
  width: 1rem;
  height: 1rem;
  transform: rotate(45deg);
  background: var(--fabric-orange);
}

.fabric-approach { background: var(--fabric-mist); }
.fabric-approach__heading { max-width: 78rem; margin-bottom: clamp(4rem, 5vw, 7rem); }

.fabric-steps { display: grid; gap: 2rem; }
.fabric-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 2.8rem;
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: 0 1.2rem 3rem rgba(0, 52, 105, .08);
}
.fabric-step__number { color: var(--fabric-orange); font-size: 1.6rem; font-weight: 700; letter-spacing: .1em; }
.fabric-step h3 { margin: 0 0 .8rem; }
.fabric-step p { margin: 0; color: #42536a; }

.fabric-technology {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
  padding: 3.2rem;
  border-radius: 1.6rem;
  color: #fff;
  background: var(--fabric-navy);
}
.fabric-technology h3 { margin: 0; color: #fff; }
.fabric-technology p { margin: 0; color: rgba(255,255,255,.84); }

.fabric-proof { background: #fff; }
.fabric-proof__layout { display: grid; gap: clamp(4rem, 6vw, 8rem); align-items: center; }
.fabric-proof figure {
  margin: 0;
  padding: clamp(3.2rem, 4vw, 5.2rem);
  border-left: .7rem solid var(--fabric-orange);
  border-radius: 0 2rem 2rem 0;
  background: color-mix(in srgb, var(--fabric-orange) 8%, #fff);
}
.fabric-proof blockquote,
.fabric-proof__statement { margin: 0; color: var(--fabric-blue); font-size: clamp(2.2rem, 2vw, 3.2rem); line-height: 1.4; }
.fabric-proof figcaption { display: grid; margin-top: 2.4rem; color: #42536a; }
.fabric-proof figcaption strong { color: var(--fabric-navy); }

/* Full-width proof band: must follow the base .fabric-proof rules to win the cascade */
.fabric-proof.fabric-proof--band { padding: clamp(4rem, 4vw, 6rem) 0; }
.fabric-proof--band .fabric-proof__band-inner { display: grid; justify-items: center; text-align: center; }
.fabric-proof--band .cb__kicker { margin-bottom: 1.6rem; }
.fabric-proof--band figure {
  max-width: 96rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.fabric-proof--band figcaption { justify-items: center; margin-top: 1.8rem; }

/* A principle is a Masterminds statement, not a customer quote, so it gets no
   figure, no quotation marks and no speaker caption. The label lines name the
   source of the experience rather than a person who said the words. */
.fabric-proof__principle { max-width: 96rem; }
.fabric-proof__principle-name {
  margin: 2.4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,52,105,.22);
  max-width: 44rem;
  color: var(--fabric-navy);
  font-weight: 700;
}
.fabric-proof__principle-role { margin: .4rem 0 0; color: #42536a; font-size: 1.6rem; }

/* One introductory sentence above the proof. It sits outside the figure so it
   can never be read as part of a quotation, and stays smaller than the
   statement it introduces. */
.fabric-proof__lead {
  max-width: 72rem;
  margin: 0 auto 2.4rem;
  color: #42536a;
}

.fabric-enquiry {
  scroll-margin-top: 10rem;
  color: #fff;
  background:
    linear-gradient(112deg, rgba(0,62,115,.96), rgba(0,14,60,.99)),
    var(--fabric-navy);
}
.fabric-enquiry h2,
.fabric-enquiry__intro > p:not(.cb__kicker) { color: #fff; }
.fabric-enquiry__layout { display: grid; gap: clamp(4rem, 6vw, 8rem); align-items: start; }
.fabric-enquiry__promise { margin-top: 3.2rem; max-width: 60rem; }
.fabric-enquiry__promise p { margin: 0; color: rgba(255,255,255,.84); }

.fabric-form-card { padding: clamp(2.4rem, 3vw, 4rem); }
.fabric-form-card form { gap: 1.8rem; }
.fabric-form-grid { display: grid; gap: 1.8rem; }
.fabric-form-card textarea { min-height: 11rem; }
.fabric-form-submit { width: 100%; background: var(--fabric-orange) !important; color: var(--fabric-navy) !important; }
.fabric-form-submit span { color: inherit !important; }
.fabric-form-card .form-note { margin: 0; }

@media (min-width: 769px) {
  .fabric-outcome-grid,
  .fabric-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fabric-review__layout,
  .fabric-proof__layout,
  .fabric-enquiry__layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .fabric-technology { grid-template-columns: minmax(24rem, .65fr) minmax(0, 1.35fr); align-items: center; }
  .fabric-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .fabric-landing-page .page-header__hero-content__header { max-width: 15ch; font-size: clamp(3.8rem, 12vw, 5.4rem); }
  .fabric-outcomes,
  .fabric-review,
  .fabric-approach,
  .fabric-proof,
  .fabric-enquiry { padding: 4.8rem 0; }
  .fabric-review__deliverables,
  .fabric-proof figure { padding: 2.8rem 2.4rem; }
}

/* Optional tool band inside the approach module (Azure Platform: cost calculator) */
.fabric-tool {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  margin-top: 2rem;
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border: 1px solid color-mix(in srgb, var(--fabric-orange) 50%, transparent);
  border-radius: 1.6rem;
  background: #fff;
  color: var(--fabric-blue);
  text-decoration: none;
}
.fabric-tool:hover,
.fabric-tool:focus-visible { border-color: var(--fabric-orange); }
.fabric-tool .cb__kicker { display: block; margin-bottom: .8rem; color: var(--fabric-orange); }
.fabric-tool__title {
  display: block;
  margin-bottom: .8rem;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--m);
  line-height: 1.15;
  text-transform: uppercase;
}
.fabric-tool__text { display: block; max-width: 62rem; color: #42536a; }
.fabric-tool__action {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--fabric-orange);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.fabric-tool:hover .fabric-tool__action span { transform: translateX(.5rem); }
.fabric-tool__action span { transition: transform .2s ease; }
@media (min-width: 769px) {
  .fabric-tool { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
}


/* Standalone tool band between outcomes and the engagement module */
.fabric-tool-band { padding: 0 0 clamp(5.2rem, 5vw, 8rem); background: #fff; }


/* Contextual links to adjacent services, between the approach and the enquiry
   form. Borrows the tool band's card language so it reads as part of the page
   rather than a bolted-on "related posts" widget. */
.fabric-related { padding: clamp(4.8rem, 5vw, 7.2rem) 0; background: #fff; }
.fabric-related__title {
  margin-bottom: clamp(2.4rem, 3vw, 3.6rem);
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--m);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fabric-blue);
}
.fabric-related__grid { display: grid; gap: 1.6rem; }
.fabric-related__item {
  display: block;
  padding: clamp(2rem, 2.4vw, 2.8rem);
  border: 1px solid #dfe5ec;
  border-radius: 1.6rem;
  background: var(--fabric-mist);
  color: var(--fabric-blue);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.fabric-related__item:hover,
.fabric-related__item:focus-visible {
  border-color: var(--fabric-orange);
  transform: translateY(-.2rem);
}
.fabric-related__item strong {
  display: block;
  margin-bottom: .8rem;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--s);
  line-height: 1.2;
  text-transform: uppercase;
}
.fabric-related__item span { display: block; color: #42536a; }
@media (prefers-reduced-motion: reduce) {
  .fabric-related__item { transition: border-color .2s ease; }
  .fabric-related__item:hover,
  .fabric-related__item:focus-visible { transform: none; }
}
@media (min-width: 769px) {
  .fabric-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 1200px) {
  /* Three across, which is the grid the rest of the site uses. Azure Platform
     carries four links and stays two-by-two rather than leaving a lone card on
     a second row: --related-columns is set per page from the link count. */
  .fabric-related__grid { grid-template-columns: repeat(var(--related-columns, 3), minmax(0, 1fr)); }
}

/* Cortex serves all three domains, so it takes no domain colour: orange means
   Analytics, teal means Data and purple means DevOps on this site. It uses the
   brand navy instead. The hero button would then be navy on the navy hero, so
   that one control flips to white with navy text; everything else the accent
   paints sits on white and reads fine in navy. */
.fabric-landing-page.group-cortex { --fabric-orange: #003469; }
.fabric-landing-page.group-cortex .service-hero-action .button--default,
.fabric-landing-page.group-cortex .fabric-cta {
  background: #fff !important;
  color: #003469 !important;
}

/* The navy accent is fine on white and on the mist, but three sections here
   are navy themselves: the engagement review, the technology aside and the
   enquiry section. On those the accent-coloured kickers, the deliverables
   label, the list bullets and the panel border were navy on navy, at a
   contrast ratio of about 1.5. They take the brand grey tint instead, the
   neutral the guide gives for exactly this, so the kicker stays distinct from
   the white heading beneath it. */
.fabric-landing-page.group-cortex .fabric-review .cb__kicker,
.fabric-landing-page.group-cortex .fabric-technology .cb__kicker,
.fabric-landing-page.group-cortex .fabric-enquiry .cb__kicker,
.fabric-landing-page.group-cortex .fabric-review__label {
  color: #cbced0;
}

.fabric-landing-page.group-cortex .fabric-review__deliverables {
  border-color: rgba(203, 206, 208, .55);
}

.fabric-landing-page.group-cortex .fabric-review__deliverables li::before {
  background: #cbced0;
}

/* The enquiry form's submit is filled with the accent and lettered in the
   dark navy, which reads on orange, purple or teal and vanishes on navy. It
   sits on the white form card, so the fill stays navy and the letters go
   white. */
.fabric-landing-page.group-cortex .fabric-form-submit,
.fabric-landing-page.group-cortex .fabric-form-submit span {
  color: #fff !important;
}

/* A tool band can carry a picture of the thing it opens. The Cortex band shows
   the demo's dashboard, because a sentence about an interactive demo earned
   fewer clicks than a glimpse of it. The picture takes its own column on
   wider screens and sits above the text on a phone. */
.fabric-tool--visual { grid-template-columns: minmax(0, 1fr); }
.fabric-tool__visual {
  display: block;
  overflow: hidden;
  border-radius: .8rem;
  border: 1px solid #dce5ed;
  box-shadow: 0 1rem 2.4rem rgba(0, 4, 52, .12);
  background: #fff;
}
.fabric-tool__visual img { display: block; width: 100%; height: auto; }
@media (min-width: 769px) {
  .fabric-tool--visual { grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr) auto; column-gap: 3rem; }
}