/* Griffiths & Co. — "Work with us". Deliberately close to the homepage panes:
   same palette, same type, just given room to breathe as its own page. The only
   new device is the numbered head, which ties it to the services page. */

.wu-hero {
  background: var(--gc-brand);
  color: var(--gc-bone);
  padding: calc(var(--gc-nav-h-scrolled) + var(--gc-promo-h) + clamp(40px, 5vw, 76px)) var(--gc-gutter) clamp(46px, 5vw, 72px);
  display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px);
}
.wu-hero h1 {
  margin: 0; max-width: 18ch;
  font: 400 clamp(32px, 4.6vw, 62px)/1.1 var(--gc-display);
}
.wu-hero__lede {
  margin: 0; max-width: 56ch;
  font: 300 clamp(15px, 1.2vw, 17px)/1.72 var(--gc-ui);
  color: var(--gc-text);
}
.wu-hero__jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.wu-hero__jump a {
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(198, 169, 107, .6);
  font: 500 11px/1 var(--gc-ui); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gc-champagne);
  text-decoration: none;
  transition: background-color .25s var(--gc-ease), color .25s var(--gc-ease);
}
.wu-hero__jump a:hover { background: var(--gc-champagne); color: #00112F; }

/* ------------------------------------------------------------- the blocks */
.wu-block { padding: clamp(52px, 6vw, 88px) var(--gc-gutter); scroll-margin-top: var(--gc-nav-h-scrolled); }
.wu-block--light { background: var(--gc-sand); color: var(--gc-midnight); }
.wu-block--dark  { background: var(--gc-brand); color: var(--gc-bone); }

.wu-block__inner { display: grid; gap: clamp(26px, 3.4vw, 56px); }
@media (min-width: 1000px) { .wu-block__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.wu-block__num {
  display: block; margin-bottom: 12px;
  font: 400 clamp(26px, 3vw, 40px)/1 var(--gc-display);
  color: rgba(0, 18, 56, .26);
}
.wu-block--dark .wu-block__num { color: rgba(233, 226, 212, .32); }

.wu-block__head h2 { margin: 0 0 14px; font: 400 clamp(26px, 3vw, 42px)/1.14 var(--gc-display); }
.wu-block__sub { margin: 0; max-width: 46ch; font: 300 clamp(15px, 1.15vw, 16.5px)/1.72 var(--gc-ui); }
.wu-block--light .wu-block__sub { color: #4A4E58; }
.wu-block--dark  .wu-block__sub { color: var(--gc-text); }

.wu-block__body { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); align-items: flex-start; }

.wu-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.wu-list li {
  position: relative; padding-left: 22px;
  font: 300 clamp(14.5px, 1.1vw, 16px)/1.6 var(--gc-ui);
}
.wu-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gc-champagne);
}
.wu-block--light .wu-list li { color: #3d4a68; }
.wu-block--dark  .wu-list li { color: var(--gc-text); }

.wu-note {
  padding: clamp(18px, 2vw, 26px);
  border-left: 1px solid var(--gc-champagne);
  background: rgba(255, 255, 255, .34);
  max-width: 56ch;
}
.wu-block--dark .wu-note { background: rgba(255, 255, 255, .06); }
.wu-note h3 {
  margin: 0 0 8px;
  font: 500 10.5px/1 var(--gc-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gc-champagne);
}
.wu-note p { margin: 0; font: 300 14.5px/1.7 var(--gc-ui); }
.wu-block--light .wu-note p { color: #4A4E58; }
.wu-block--dark  .wu-note p { color: var(--gc-text); }