/* Editorial Fabric campaign concept, scoped to this landing page. */
.fabric-experience-page {
  --fabric-navy: #000434;
  --fabric-blue: #003469;
  --fabric-orange: #f99f3f;
  --fabric-paper: #f4f3ef;
}
/* The hero, shared menu and footer use the site's own typography.
   Editorial typography belongs only to the page content. */
.fabric-experience-page .page-main {
  font-family: Arial, sans-serif;
}
.fabric-experience-page .page-main :is(h1, h2, h3) { text-transform: none; }

.fabric-hero-brand,
.fabric-hero-promise { display: block; text-wrap: balance; }
.fabric-experience-page .page-header__hero-content__intro p { text-wrap: balance; }
.fabric-experience-page :is(#fabric-hero-title, #fabric-fit-title, #fabric-faq-title, #service-review, #service-proof-title, #fabric-specialist-title) { scroll-margin-top: 11rem; }
.fabric-experience-page .service-hero-action { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem 3rem; }
.fabric-experience-page .fabric-hero-secondary { color: #fff; border-bottom: 1px solid rgba(255,255,255,.55); padding: .8rem 0; font-size: 1.7rem; text-decoration: none; }
.fabric-experience-page .fabric-hero-secondary span { margin-left: .8rem; }

.fabric-fit,
.fabric-human-proof,
.fabric-buyer-faq { padding: clamp(5rem, 6.8vw, 10rem) 0; }
.fabric-fit { background: #fff; }
.fabric-fit__layout,
.fabric-buyer-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(4rem, 7vw, 11rem); }
.fabric-fit h2,
.fabric-buyer-faq h2 { color: var(--fabric-blue); font-size: clamp(3.6rem, 3.8vw, 5.6rem); line-height: 1.08; letter-spacing: -.02em; }
.fabric-fit__intro { max-width: 56rem; font-size: 2rem; line-height: 1.55; color: #455366; }
.fabric-fit .cb__kicker,
.fabric-buyer-faq .cb__kicker,
.fabric-human-proof .cb__kicker { color: var(--fabric-blue); font-size: 1.35rem; letter-spacing: .11em; }
.fabric-fit__label { margin: 0 0 1.4rem; font-size: 1.4rem; font-weight: 700; color: var(--fabric-blue); }
.fabric-fit details { border-top: 1px solid #c8d1d9; }
.fabric-fit details:last-child { border-bottom: 1px solid #c8d1d9; }
.fabric-fit summary { display: grid; grid-template-columns: 3rem 1fr 1.7rem; gap: 1.6rem; align-items: center; cursor: pointer; color: var(--fabric-blue); padding: 2.3rem 0; font-size: 2rem; font-weight: 700; line-height: 1.35; list-style: none; }
.fabric-fit summary::-webkit-details-marker,
.fabric-buyer-faq summary::-webkit-details-marker { display: none; }
.fabric-fit__number { color: #8a5520; font-size: 1.3rem; font-weight: 400; letter-spacing: .08em; }
.fabric-fit details p { padding: 0 3rem 2.4rem 4.6rem; margin: 0; color: #455366; font-size: 1.7rem; line-height: 1.55; }
.fabric-toggle { position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; }
.fabric-toggle::before,
.fabric-toggle::after { content: ""; position: absolute; background: currentColor; }
.fabric-toggle::before { top: .7rem; left: 0; width: 1.5rem; height: .15rem; }
.fabric-toggle::after { top: 0; left: .7rem; height: 1.5rem; width: .15rem; }
.fabric-fit details[open] > summary .fabric-toggle::after,
.fabric-buyer-faq details[open] > summary .fabric-toggle::after { display: none; }
.fabric-fit summary:focus-visible,
.fabric-buyer-faq summary:focus-visible,
.fabric-experience-page :is(.page-header__hero-content, .page-main) a:focus-visible { outline: 3px solid var(--fabric-orange); outline-offset: 5px; }

.fabric-experience-page .fabric-review { background: var(--fabric-navy); padding: clamp(6rem, 7vw, 10rem) 0; }
.fabric-experience-page .fabric-review__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(4rem, 7vw, 10rem); }
.fabric-experience-page .fabric-review h2 { font-size: clamp(3.8rem, 4vw, 6rem); line-height: 1.07; }
.fabric-experience-page .fabric-review__intro > p:not(.cb__kicker) { font-size: 2rem; line-height: 1.6; color: #d5dbea; }
.fabric-review-sheet { margin: 0; padding: clamp(2.6rem, 3.2vw, 4.6rem); background: var(--fabric-paper); color: var(--fabric-navy); border-top: .7rem solid var(--fabric-orange); transform: rotate(-1deg); box-shadow: 1.5rem 1.5rem 0 #102049; }
.fabric-review-sheet__masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.7rem; border-bottom: 1px solid #bec6cc; text-transform: uppercase; letter-spacing: .09em; font-size: 1.05rem; font-weight: 700; }
.fabric-review-sheet__masthead span:last-child { white-space: nowrap; }
.fabric-review-sheet__label { margin: 2.4rem 0 1rem; text-transform: uppercase; letter-spacing: .1em; color: #80511f; font-size: 1.1rem; font-weight: 700; }
.fabric-review-sheet h3 { color: var(--fabric-navy); margin: 0 0 1rem; font-size: clamp(3rem, 3vw, 4.4rem); line-height: 1.06; }
.fabric-review-sheet__intro { margin: 0; font-size: 1.6rem; line-height: 1.45; color: #455366; }
.fabric-review-sheet__flow { list-style: none; padding: 0; margin: 2.6rem 0 1.8rem; }
.fabric-review-sheet__flow li { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.6rem; align-items: baseline; border-left: 2px solid #aab7c6; padding: 0 0 2rem 2.2rem; margin-left: .5rem; }
.fabric-review-sheet__flow li::before { content: ""; width: .9rem; height: .9rem; position: absolute; left: -.55rem; top: .5rem; background: var(--fabric-blue); border: 2px solid var(--fabric-paper); box-sizing: content-box; }
.fabric-review-sheet__flow li:last-child { padding-bottom: .2rem; }
.fabric-review-sheet__flow span { font-size: 1.15rem; color: #536074; text-transform: uppercase; letter-spacing: .06em; }
.fabric-review-sheet__flow strong { color: var(--fabric-blue); font-size: 1.5rem; line-height: 1.4; }
.fabric-review-sheet__owner { border-top: 1px solid #bec6cc; padding: 1.7rem 0; margin: 0; }
.fabric-review-sheet__owner dt { color: #536074; font-size: 1.15rem; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.fabric-review-sheet__owner dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
.fabric-review-sheet__decision { background: #ffe0b9; padding: 1.8rem 2rem; border-left: 3px solid #c6741b; }
.fabric-review-sheet__decision > span { text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; font-weight: 700; }
.fabric-review-sheet__decision p { color: var(--fabric-navy); font-size: 1.7rem; line-height: 1.35; margin: .6rem 0 0; font-weight: 700; }
.fabric-review-sheet figcaption { color: #536074; font-size: 1.15rem; margin-top: 1.8rem; line-height: 1.5; }

.fabric-human-proof { background: #fff; }
.fabric-human-proof__layout { display: block; }
.fabric-specialist { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #ffffff35; }
.fabric-specialist > img { display: block; width: 8.4rem; height: 8.4rem; object-fit: cover; }
.fabric-specialist__caption { color: #fff; }
.fabric-specialist__caption h3 { color: #fff; margin: 0 0 .7rem; font-size: 2.4rem; line-height: 1.15; }
.fabric-specialist__caption p { font-size: 1.35rem; line-height: 1.5; margin: 0 0 1rem; }
.fabric-specialist__caption a { color: #fff; font-size: 1.35rem; text-decoration: underline; text-underline-offset: .5rem; }
.fabric-human-proof__quote > img { width: 13rem; height: 6rem; object-fit: contain; object-position: left center; margin-bottom: 2rem; }
.fabric-human-proof__quote figure { margin: 0; }
.fabric-human-proof__quote blockquote { margin: 0; color: var(--fabric-blue); font-family: "PT Sans Narrow", Arial, sans-serif; font-size: clamp(3rem, 3.2vw, 4.6rem); line-height: 1.3; }
.fabric-human-proof__quote figcaption { display: grid; gap: .2rem; border-top: 1px solid #c8d1d9; padding-top: 2rem; margin-top: 2.8rem; font-size: 1.5rem; color: #455366; }
.fabric-human-proof__quote figcaption strong { color: var(--fabric-blue); }

.fabric-experience-page .fabric-approach { background: var(--fabric-paper); }
.fabric-experience-page .fabric-step { border-radius: 0; box-shadow: none; background: transparent; padding: 2.4rem 0; border-top: 2px solid #bdc8d0; }
.fabric-experience-page .fabric-step__number { color: #8a5520; }
.fabric-experience-page .fabric-steps { gap: 3rem; }
.fabric-experience-page .fabric-technology { border-radius: 0; background: var(--fabric-blue); }
.fabric-experience-page .fabric-related { background: #fff; }
.fabric-experience-page .fabric-related__item { border-radius: 0; box-shadow: none; }
.fabric-buyer-faq { background: #fff; border-top: 1px solid #dce1e5; }
.fabric-buyer-faq__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.fabric-buyer-faq__layout > div:first-child > p:last-child { color: #455366; font-size: 1.8rem; line-height: 1.55; }
.fabric-buyer-faq details { border-top: 1px solid #c8d1d9; }
.fabric-buyer-faq details:last-child { border-bottom: 1px solid #c8d1d9; }
.fabric-buyer-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; color: var(--fabric-blue); padding: 2.2rem 0; font-size: 1.9rem; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.fabric-buyer-faq details > div { padding: 0 3.5rem 2.4rem 0; }
.fabric-buyer-faq details p { margin: 0; color: #455366; font-size: 1.7rem; line-height: 1.6; }
.fabric-buyer-faq details a { display: inline-block; color: var(--fabric-blue); margin-top: 1.6rem; text-decoration: underline; text-underline-offset: .4rem; font-size: 1.5rem; }
.fabric-experience-page .fabric-enquiry { background: var(--fabric-navy); }
.fabric-experience-page .fabric-form-card { border-radius: 0; }
.fabric-message-field { display: grid; gap: .6rem; }
/* Override the shared theme's fixed minimum height and zero vertical padding. */
.fabric-experience-page .fabric-form-card textarea[name="message"] {
  min-height: 12rem !important;
  padding: 1.2rem 1.4rem !important;
  font-size: 1.6rem;
  line-height: 1.5;
}
.fabric-message-help { margin: .2rem 0 0; font-size: 1.4rem; line-height: 1.45; font-weight: 400; text-transform: none; color: #536074; }

@media (max-width: 900px) {
  .fabric-fit__layout,
  .fabric-buyer-faq__layout,
  .fabric-experience-page .fabric-review__layout { grid-template-columns: 1fr; }
  .fabric-review-sheet { width: calc(100% - 1.5rem); max-width: 62rem; transform: none; }
  .fabric-buyer-faq__layout { gap: 2.5rem; }
}
@media (max-width: 480px) {
  .fabric-experience-page .page-header__hero-content__intro p { text-wrap: pretty; }
  .fabric-experience-page .service-hero-action { align-items: flex-start; flex-direction: column; }
  .fabric-experience-page .service-hero-action .button--default { min-width: 0; width: auto; max-width: 100%; }
  .fabric-fit h2,
  .fabric-buyer-faq h2 { font-size: 3.8rem; }
  .fabric-fit summary { grid-template-columns: 2rem 1fr 1.5rem; gap: 1rem; font-size: 1.8rem; }
  .fabric-fit details p { padding-left: 3rem; padding-right: 0; }
  .fabric-review-sheet { padding: 2.3rem; box-shadow: .8rem .8rem 0 #102049; width: calc(100% - .8rem); }
  .fabric-review-sheet__flow li { grid-template-columns: 1fr; gap: .3rem; }
  .fabric-specialist { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 1.6rem; }
  .fabric-specialist > img { width: 6.4rem; height: 6.4rem; }
}
