/* Shared typography, spacing, and resilience pass for WebGeneric core pages. */
:root {
  --wg-section-space: clamp(4.5rem, 7vw, 7rem);
  --wg-section-space-mobile: clamp(3.5rem, 12vw, 5rem);
  --wg-content-gap: clamp(1.5rem, 3vw, 2.75rem);
}

html,
body,
body :where(h1,h2,h3,h4,h5,h6,p,a,span,strong,b,small,label,li,summary,button,input,select,textarea,code,pre),
button,
input,
select,
textarea,
code,
pre {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
}

h1 {
  font-size: clamp(2.7rem, 5vw, 2.35rem) !important;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.7rem) !important;
}

/* Keep display type confident without the heavy, cramped look. */
main :is(h1, h2) { font-weight: 500 !important; }
main :is(h3, h4, h5, h6) { font-weight: 600 !important; }
.hero-copy .lede,
.positioning .large-copy,
.feature-row .large-copy { font-weight: 400 !important; }
.visual-signal {
  position: relative;
  z-index: 7 !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  padding-bottom: .12em;
  overflow: visible !important;
}
.visual-path b { font-weight: 500 !important; }
.visual-path { position: relative; z-index: 4; }
.hero-visual::after { z-index: 0; }
.visual-path > span { position: relative; z-index: 5; }
.visual-path small {
  position: relative;
  z-index: 6;
  color: #3f382e;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

/* About: connected operating view */
.about-capability-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fffaf0;
  background: #181610;
  border-block: 1px solid #2f2a1d;
  padding: clamp(58px, 7vw, 92px) 0 !important;
}
.about-capability-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #f4b400;
}
.about-capability-band .shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 2.8fr);
  align-items: stretch;
  gap: clamp(34px, 5vw, 80px);
}
.about-capability-band .eyebrow {
  color: #f4b400 !important;
  max-width: 180px;
  margin: 0;
  padding-top: 8px;
  font-size: .72rem;
  line-height: 1.55;
  letter-spacing: .16em;
}
.about-capability-band .eyebrow::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 24px;
  background: #f4b400;
}
.about-capability-band .shell > div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto;
  gap: 0 12px !important;
  align-items: stretch !important;
}
.about-capability-band strong,
.about-capability-band span {
  position: relative;
  display: block;
  min-width: 0;
  color: #17140d;
  background: #f7b817;
  border-inline: 1px solid #f7b817;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.about-capability-band strong {
  align-self: end;
  border-top: 1px solid #f7b817;
  border-radius: 2px 2px 0 0;
  padding: 30px 28px 12px;
  font-size: clamp(1.45rem, 2.25vw, 2.15rem) !important;
  font-weight: 500 !important;
  line-height: 1.05;
}
.about-capability-band span {
  align-self: start;
  min-height: 92px;
  border-bottom: 1px solid #f7b817;
  border-radius: 0 0 2px 2px;
  padding: 4px 28px 28px;
  color: #4f3900 !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  line-height: 1.55;
}
.about-capability-band strong::before {
  display: block;
  margin-bottom: 34px;
  color: #6c4d00;
  font: 600 .66rem/1 Poppins, sans-serif;
  letter-spacing: .16em;
}
.about-capability-band strong:nth-child(1)::before { content: "01 / UNDERSTAND"; }
.about-capability-band strong:nth-child(3)::before { content: "02 / BUILD"; }
.about-capability-band strong:nth-child(5)::before { content: "03 / ADVANCE"; }
.about-capability-band strong:nth-child(1),
.about-capability-band span:nth-child(2) { grid-column: 1; }
.about-capability-band strong:nth-child(3),
.about-capability-band span:nth-child(4) { grid-column: 2; }
.about-capability-band strong:nth-child(5),
.about-capability-band span:nth-child(6) { grid-column: 3; }
.about-capability-band strong { grid-row: 1; }
.about-capability-band span { grid-row: 2; }
.about-capability-band strong:hover,
.about-capability-band strong:hover + span,
.about-capability-band strong:has(+ span:hover),
.about-capability-band span:hover {
  color: #fffaf0;
  background: #29251b;
  border-color: #5d522f;
}
.about-capability-band strong:has(+ span:hover),
.about-capability-band strong:hover {
  transform: translateY(-5px);
  box-shadow: 0 -18px 36px rgb(0 0 0 / 22%);
}
.about-capability-band span:hover,
.about-capability-band strong:hover + span {
  transform: translateY(-5px);
  box-shadow: 0 20px 36px rgb(0 0 0 / 22%);
}
.about-capability-band strong:hover::before,
.about-capability-band strong:has(+ span:hover)::before,
.about-capability-band span:hover {
  color: #f4b400 !important;
}

@media (max-width: 900px) {
  .about-capability-band .shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .about-capability-band .eyebrow {
    max-width: none;
    padding-top: 0;
  }
  .about-capability-band .eyebrow::after { margin-top: 16px; }
}

@media (max-width: 680px) {
  .about-capability-band { padding: 52px 0 !important; }
  .about-capability-band .shell > div {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, auto);
    gap: 0 !important;
  }
  .about-capability-band strong,
  .about-capability-band span {
    grid-column: 1 !important;
    transform: none !important;
  }
  .about-capability-band strong:nth-child(1) { grid-row: 1; }
  .about-capability-band span:nth-child(2) { grid-row: 2; }
  .about-capability-band strong:nth-child(3) { grid-row: 3; margin-top: 12px; }
  .about-capability-band span:nth-child(4) { grid-row: 4; }
  .about-capability-band strong:nth-child(5) { grid-row: 5; margin-top: 12px; }
  .about-capability-band span:nth-child(6) { grid-row: 6; }
  .about-capability-band strong { padding: 24px 24px 10px; }
  .about-capability-band strong::before { margin-bottom: 22px; }
  .about-capability-band span { min-height: 0; padding: 4px 24px 24px; }
}

html {
  overflow-x: clip;
  scroll-padding-top: 7rem;
}

body,
main,
section,
.shell,
.split,
.section-heading,
.hero-copy {
  min-width: 0;
}

main { overflow: visible; }

img,
svg,
video,
canvas {
  max-width: 100%;
}

.section {
  padding-block: var(--wg-section-space) !important;
}

.section > .shell,
.section.shell,
.page-hero > .shell,
.final-cta > .shell {
  min-width: 0;
}

.section-heading {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-heading > :last-child,
.page-hero .shell > :last-child,
.hero-copy > :last-child {
  margin-bottom: 0;
}

.split,
.pillar-grid,
.service-grid,
.plain-grid,
.scope-grid,
.process-grid,
.deliverable-grid,
.result-grid,
.industry-grid,
.about-principles {
  gap: var(--wg-content-gap);
}

.service-card,
.plain-card,
.scope-card,
.service-result-card,
.pillar-card,
.industry-proof,
.about-principles article {
  min-width: 0;
  overflow-wrap: anywhere;
}

.button-row {
  row-gap: 0.85rem;
}

/* Separate adjacent copy and align the repeated service introductions. */
main h2 + p {
  margin-top: 1.25rem;
}

main h1 + p { margin-top: 1.5rem; }
main h3 + p { margin-top: .875rem; }
main :is(h1,h2,h3) { line-height: 1.2; }
main :is(p,li) { overflow-wrap: break-word; }
main .eyebrow { line-height: 1.6; }
.hero-light .hero-copy .eyebrow { color: #8b6200; }

.process-grid article h3,
.deliverable-grid article h3,
.plain-card h3 { margin-bottom: .875rem; }
.process-grid article p,
.deliverable-grid article p { line-height: 1.65; }
.service-card > span + p { margin-top: 1rem; }
.service-card p { margin-bottom: 1.5rem; }
.service-card b { margin-top: auto; }
.scope-card p { margin-bottom: 1.5rem; }
.service-finder-result-head { align-items: baseline; flex-wrap: wrap; gap: .75rem 2rem; }
.service-finder-result-head .service-finder-status { margin-top: 0; }
.service-filter-row { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
.service-directory-group header > div { flex-wrap: wrap; gap: 1rem; }
.enquiry-form > *, .enquiry-form label { min-width: 0; }
.enquiry-form textarea { resize: vertical; min-height: 8rem; }
.enquiry-form :is(input,select,textarea) { font-size: 1rem; line-height: 1.5; }
.modal-panel h2 { margin: 1.25rem 3rem 1.25rem 0; line-height: 1.2; }
.modal-panel > p { margin-bottom: 1.75rem; line-height: 1.65; }
.modal-panel .enquiry-form { margin-top: 1.5rem; }
.modal-panel { overscroll-behavior: contain; }
.button { white-space: normal; line-height: 1.5; }
.footer-cta h2 { line-height: 1.2; margin-bottom: 1.5rem; }
.post-card h2 { font-size: clamp(1.25rem,1.7vw,1.55rem) !important; line-height: 1.35; }
.article-body p + p { margin-top: 1.25rem; }
.article-body :is(ul,ol) { margin-block: 1.25rem; padding-left: 1.5rem; }
.article-body li + li { margin-top: .625rem; }
.article-body h3 { margin-top: 1.75rem; }
.post-card-body > p { line-height: 1.7; }
.split-band h2 + p { margin-top: 1.25rem; }
header img[src="/insights/webgeneric-logo-animated.svg"] {
  content: url('/webgeneric-logo.png');
}

@media (min-width: 1001px) {
  .site-header .button.header-cta,
  .site-header .button.header-cta:hover,
  .site-header .button.header-cta:focus-visible { top: 50%; transform: translateY(-50%) !important; }
}

main p + p {
  margin-top: 1rem;
}

.positioning,
.feature-row .split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(2.5rem, 6vw, 5rem);
}

.positioning .eyebrow,
.feature-row .eyebrow {
  margin: 0 0 1rem;
}

.positioning h2,
.feature-row h2 {
  margin: 0;
  line-height: 1.18;
}

.positioning .large-copy {
  margin: 0 0 1.25rem;
}

.positioning p:not(.eyebrow),
.feature-row .large-copy {
  line-height: 1.65;
}

.feature-row .large-copy {
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.feature-row .large-copy + .button {
  margin-top: 1.75rem;
  max-width: 100%;
  white-space: normal;
  line-height: 1.5;
  text-align: center;
}

.feature-list a {
  gap: 0.5rem;
  padding-block: 1.25rem;
}

.feature-list a small {
  line-height: 1.65;
}

/* Stack the hero at tablet widths so copy remains readable instead of being
   squeezed beside the visual card. */
@media (max-width: 900px) {
  .hero-slide {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(2rem, 6vw, 3rem);
    min-height: 0;
  }

  .hero-copy,
  .hero-copy h1,
  .hero-copy .lede,
  .hero-visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-copy h1,
  .hero-copy .lede {
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-visual { box-sizing: border-box; }
  .visual-path > span {
    grid-template-columns: 30px minmax(0, 96px) minmax(0, 1fr) !important;
    column-gap: 14px;
    min-width: 0;
  }
  .visual-path b,
  .visual-path small { min-width: 0; }
  .visual-path small { overflow-wrap: normal; word-break: normal; }
}

@media (max-width: 1000px) {
  .positioning,
  .feature-row .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

.faq-list details:last-child,
.feature-list > :last-child,
.check-list > :last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  :root {
    --wg-section-space: var(--wg-section-space-mobile);
    --wg-content-gap: 1.25rem;
  }

  h1 {
    font-size: clamp(2.15rem, 10vw, 2.7rem) !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    overflow-wrap: anywhere;
  }

  .page-hero {
    padding-block: clamp(4rem, 16vw, 5.25rem) !important;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .service-finder-result-head .service-finder-status { margin-top: .875rem; }

  .button-row,
  .industry-products-foot {
    align-items: stretch;
  }

  .button-row .button,
  .button-row a.button {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .section {
    padding-block: 3.5rem !important;
  }

  .shell {
    padding-inline: 0;
  }

  .button-row { flex-wrap: wrap; }
  .button-row > .button { flex: 1 1 100%; min-width: 0; }
  .service-filter-row { gap: .5rem; }
  .service-filter-row button { max-width: 100%; white-space: normal; text-align: left; }
  .modal-panel { padding: 1.5rem 1.25rem 4rem; }

  .hero-visual { min-height: 0; }
  .hero-visual .visual-heading { padding-bottom: 14px; }
  .hero-visual .visual-signal {
    margin: .75rem 0 1rem !important;
    font-size: clamp(2rem, 10vw, 2.6rem) !important;
  }
  .hero-visual .visual-path small { color: #4a453d; }
  .hero-visual .visual-path > span { min-height: 48px; padding-block: 4px; }
  .hero-visual .visual-foot { padding-top: 12px; }
}