/* Gradual application of the identity supplied in the positioning document. */
:root {
  --color-ink: #082d52;
  --color-primary: #082d52;
  --color-primary-hover: #12416c;
  --color-secondary: #082d52;
  --color-page: #f7f6f2;
  --color-surface: #f7f6f2;
  --color-focus: #9a722e;
  --soft-blue-glow: radial-gradient(ellipse 58% 62% at -8% 34%, rgb(177 210 246 / .5), transparent 76%),
                    radial-gradient(ellipse 40% 42% at 108% 100%, rgb(203 224 248 / .28), transparent 78%);
}

.hero { --logo-width: clamp(11rem, 19vw, 16.5rem); }
.hero__overlay { background-image: var(--soft-blue-glow), var(--overlay); }
.hero__title { color: #142b41; }
.main-nav { gap: clamp(1rem, 2.6vw, 2.5rem); }

.audiences, .about, .testimonials {
  background: var(--soft-blue-glow), #fff;
}

.audiences {
  padding: clamp(4rem, 5vw, 5.25rem) clamp(1.25rem, 5.3vw, 5.6rem) 3.25rem;
  scroll-margin-top: 1rem;
}
.audiences__inner { max-width: 93.5rem; margin-inline: auto; }
.audiences__intro { text-align: center; }
.audiences__eyebrow,
.audiences__label {
  margin: 0;
  color: #a17739;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.audiences__eyebrow { text-align: center; }
.audiences h2 {
  max-width: 68rem;
  margin: 1.9rem auto 0;
  color: #09213d;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.3vw, 4.5rem);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.05em;
}
.audiences__intro > p:last-child {
  margin: 1.65rem 0 0;
  color: #60718a;
  font-family: var(--font-text);
  font-size: clamp(1.125rem, 1.48vw, 1.5rem);
  line-height: 1.4;
}
.audiences__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2.6rem; }
.audiences__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 25.8rem;
  overflow: hidden;
  padding: 4.25rem 3rem 3rem;
  border: 1px solid #eee7dd;
  border-radius: 1.45rem;
  background: #f7f4ef url('assets/audience-personal.webp') center / cover no-repeat;
  box-shadow: 0 20px 40px rgb(57 42 22 / .07);
}
.audiences__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #faf9f7 0%, rgb(250 249 247 / .96) 32%, rgb(250 249 247 / .76) 52%, rgb(250 249 247 / .22) 72%, transparent 88%);
  pointer-events: none;
}
.audiences__card--business { background-image: url('assets/audience-business.webp'); }
.audiences__card-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; height: 100%; max-width: 21rem; }
.audiences__label { font-size: 1.05rem; letter-spacing: .13em; }
.audiences__card h3 {
  margin: 1rem 0 0;
  color: #09213d;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.9vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.audiences__card-content > p:not(.audiences__label) {
  margin: 1.3rem 0 0;
  color: #60718a;
  font-family: var(--font-text);
  font-size: clamp(1rem, 1.18vw, 1.25rem);
  line-height: 1.48;
}
.audiences__card a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: .85rem;
  width: 18.4rem;
  min-height: 3.25rem;
  margin-top: 2.2rem;
  padding: .625rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: .625rem;
  background: #a17a3b;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.audiences__card--business a { width: 16.4rem; background: #092541; }
.audiences__card a span { min-width: 0; }
.audiences__card a svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.audiences__card a .audiences__button-arrow { transition: transform .2s ease; }
.audiences__card a:hover { background: #805e25; transform: translateY(-2px); }
.audiences__card a:hover .audiences__button-arrow { transform: translateX(3px); }
.audiences__card--business a:hover { background: #17466c; }
.audiences__card a:focus-visible { outline: 3px solid #9a722e; outline-offset: 4px; }
.audiences__note { margin: 2.8rem 0 0; color: #71819a; font-family: var(--font-text); font-size: 1rem; line-height: 1.5; text-align: center; }

.site-footer { background: #051c33; }
.site-footer__main { background: radial-gradient(ellipse at 78% -30%, #17436a 0, transparent 67%), linear-gradient(115deg, #051c33, #082d52); }
.site-footer__logo { width: calc(170 * var(--footer-unit)); }
.site-footer .site-footer__tagline { max-width: 17rem; color: #e2d2ad; font-size: calc(24 * var(--footer-unit)); line-height: 1.2; }
.site-footer .site-footer__description { max-width: 16rem; }

@media (min-width: 64rem) {
  .hero__signature { display: block; position: absolute; z-index: 2; right: 9%; bottom: 8%; margin: 0; color: white; font: 400 clamp(2rem, 2.6vw, 3rem)/.9 'Norcred Signature', cursive; transform: rotate(-12deg); text-shadow: 0 1px 6px rgb(20 43 65 / .3); }
  .hero__signature::after { content: ''; display: block; width: 6rem; height: .18rem; margin: .5rem 0 0 2.5rem; border-radius: 100%; background: #c6a15b; transform: rotate(-5deg); }
}

@media (max-width: 1023px) {
  .site-footer__logo { width: 150px; }
  .site-footer .site-footer__tagline { font-size: 24px; }
}
@media (max-width: 79rem) {
  .audiences__card { padding: 3rem 2rem; }
  .audiences__desktop-break { display: none; }
}
@media (max-width: 55rem) {
  .audiences { padding-top: 4rem; }
  .audiences__grid { grid-template-columns: 1fr; max-width: 45rem; margin-inline: auto; }
  .audiences__card { min-height: 25rem; padding: 3.5rem 3rem; }
}
@media (max-width: 47.999rem) {
  .hero { --logo-width: 42cqw; }
  .audiences { padding: 3.75rem 1.25rem 3rem; }
  .audiences__eyebrow { font-size: .75rem; letter-spacing: .15em; }
  .audiences h2 { margin-top: 1.4rem; font-size: clamp(2.25rem, 8.5vw, 3.5rem); line-height: 1.02; }
  .audiences__intro > p:last-child { margin-top: 1.25rem; font-size: 1rem; }
  .audiences__grid { gap: 1.25rem; margin-top: 2rem; }
  .audiences__card { min-height: 29rem; padding: 2rem; background-position: 64% top; }
  .audiences__card::before {
    background: linear-gradient(to top,
      #faf9f7 0%,
      rgb(250 249 247 / .98) 16%,
      rgb(250 249 247 / .92) 30%,
      rgb(250 249 247 / .78) 44%,
      rgb(250 249 247 / .53) 59%,
      rgb(250 249 247 / .28) 74%,
      rgb(250 249 247 / .08) 88%,
      transparent 100%);
  }
  .audiences__card-content { justify-content: flex-end; max-width: 100%; }
  .audiences__label { font-size: .8rem; }
  .audiences__card h3 { margin-top: .5rem; font-size: clamp(1.9rem, 7.5vw, 2.35rem); }
  .audiences__card-content > p:not(.audiences__label) { margin-top: .6rem; font-size: 1rem; }
  .audiences__card a, .audiences__card--business a { width: 100%; min-height: 3.5rem; margin-top: 1.25rem; padding-inline: 1.25rem; font-size: 1rem; }
  .audiences__note { margin-top: 1.5rem; font-size: .85rem; }
}
@media (max-width: 26.25rem) {
  .audiences__card {
    min-height: 28rem;
    padding: 1.5rem;
    background-position: 88% top;
  }
  .audiences__card h3 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
  .audiences__card a, .audiences__card--business a {
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
    gap: .625rem;
    padding-inline: 1rem;
    font-size: .95rem;
  }
  .audiences__card a svg { width: 1.25rem; height: 1.25rem; }
}
@media (max-width: 22rem) {
  .hero__actions .button--primary { column-gap: .625rem; font-size: .875rem; }
  .hero__actions .button--primary span { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .audiences__card a { transition: none; } }