/* The approved two-promise composition, with the same owner at work and at home. */
.promise-hero {
  --promise-ink: #012219;
  --promise-coral: #d63c23;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 100px;
  background: #fff;
  color: var(--promise-ink);
  font-family: 'BDI Inter', Arial, sans-serif;
}
.promise-canvas {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1536px;
  aspect-ratio: 1536 / 830;
  margin-inline: auto;
}
.promise-title { display: contents; }
.promise-heading {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  font-family: 'BDI Inter Tight', Arial, sans-serif;
  font-weight: 900;
  font-size: 6.15cqw;
  line-height: 1.03;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.promise-heading-firm { top: 4.45cqw; left: 3.8%; }
.promise-heading-life { top: 18.9cqw; left: 40.5%; font-size: 5.65cqw; }
body.ribbon-site main .promise-eyebrow {
  position: absolute;
  z-index: 2;
  top: .1cqw;
  left: 3.8%;
  margin: 0;
  color: var(--promise-ink);
  font-size: clamp(18px, 1.62cqw, 25px);
  line-height: 1.45;
  letter-spacing: -.025em;
}
.promise-art {
  position: absolute;
  display: block;
  height: auto;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: multiply;
  /* Lift the source's near-white paper to the page white without redrawing art. */
  filter: brightness(1.025);
}
.promise-art-clients { left: .78%; top: 11.45cqw; width: 42.2%; }
.promise-art-family > svg { display: block; width: 100%; height: auto; }
.promise-art-family { left: 44.01%; top: 26.17cqw; width: 55.99%; }
.promise-art-branch {
  left: 72.27%;
  right: min(0px, calc((100cqw - 100vw) / 2));
  top: -.98cqw;
  width: auto;
  height: 19.86cqw;
}
.promise-art-branch img {
  display: block;
  width: 100%;
  min-width: 59.58cqw;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.promise-copy { position: absolute; z-index: 3; left: 3.8%; top: 40.6cqw; width: 51%; }
body.ribbon-site main .promise-copy > p {
  margin: 0;
  max-width: none;
  font-size: clamp(18px, 1.58cqw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.025em;
  color: var(--promise-ink);
}
.promise-actions { display: flex; align-items: center; gap: 2.45cqw; margin-top: 1.9cqw; }
body.ribbon-site main .promise-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 58px;
  padding: 14px 24px;
  border: 0;
  border-radius: 9px;
  background: var(--promise-coral);
  color: #fff;
  font-size: clamp(18px, 1.53cqw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.promise-primary svg { flex: 0 0 26px; width: 26px; height: 26px; }
body.ribbon-site main .promise-primary:hover { background: #bd301d; transform: translateY(-2px); }
body.ribbon-site main .promise-primary:active { transform: translateY(1px); }
body.ribbon-site main .promise-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--promise-ink);
  font-size: clamp(18px, 1.5cqw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  white-space: nowrap;
}
.promise-secondary:hover { text-decoration-thickness: 2.5px; }
.promise-actions a:focus-visible { outline: 3px solid var(--promise-ink); outline-offset: 5px; }
body.ribbon-site main .promise-bridge {
  max-width: 1280px;
  margin: 4px auto 0;
  padding: 0 24px 52px;
  font-family: 'BDI Inter Tight', Arial, sans-serif;
  font-size: clamp(32px, 3.55vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-align: center;
}

/* Preserve every navigation destination; extend the header across the new hero. */




@media (min-width: 1181px) {
  
}

@media (max-width: 1100px) {
  
  
  .promise-hero { padding-top: 20px; }
  .promise-canvas { display: flex; flex-direction: column; aspect-ratio: auto; padding-inline: 24px; }
  body.ribbon-site main .promise-eyebrow { position: static; order: 0; margin-bottom: 24px; font-size: 18px; max-width: 32ch; }
  .promise-heading { position: static; font-size: clamp(38px, 7.9vw, 76px); line-height: 1.02; white-space: normal; max-width: 18ch; letter-spacing: -.045em; }
  .promise-heading-firm { order: 1; }
  .promise-copy { position: static; order: 2; width: 100%; margin-top: 24px; }
  body.ribbon-site main .promise-copy > p { max-width: 55ch; font-size: 20px; line-height: 1.5; }
  .promise-desktop-break { display: none; }
  .promise-actions { flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
  body.ribbon-site main .promise-primary { min-height: 54px; padding: 14px 20px; font-size: 18px; gap: 12px; }
  body.ribbon-site main .promise-secondary { font-size: 18px; }
  .promise-art { position: relative; left: auto; right: auto; top: auto; flex-shrink: 0; }
  .promise-art-clients { order: 3; width: min(100%, 480px); max-width: none; aspect-ratio: 900 / 1024; object-fit: cover; object-position: center; margin: 28px auto 40px; align-self: center; }
  .promise-heading-life { order: 4; margin-top: 0; }
  .promise-art-family { order: 5; width: min(100% + 48px, 880px); max-width: none; align-self: center; margin-top: 22px; }
  .promise-art-branch { display: none; }
  body.ribbon-site main .promise-bridge { max-width: 24ch; margin-top: 28px; padding-bottom: 44px; font-size: clamp(30px, 5vw, 44px); }
}
@media (max-width: 600px) {
  
  
  .promise-canvas { padding-inline: 20px; }
  .promise-heading { font-size: clamp(36px, 10.1vw, 59px); }
  .promise-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .promise-art-clients { margin-top: 20px; margin-bottom: 32px; }
  .promise-art-family { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .promise-actions a { transition: none; }
  body.ribbon-site main .promise-primary:is(:hover, :active) { transform: none; }
}