/* Section grounds: soft light, masked fill patterns and an inset panel, so each flat section
   gets its own surface. All decorative, drawn behind the content on pseudo-elements. */

/* Our services + Recognition, one paper band: a pale aurora along the top of services and the
   recognition hatch at the bottom. The services dot grid is gone, since the award card now sits
   right where it faded out. */
.cap-section{position:relative;isolation:isolate;overflow:clip}
.cap-section::before{content:"";position:absolute;z-index:-1;pointer-events:none}
.cap-section::before{
  inset:0 0 auto;height:min(980px,70%);
  background:
    radial-gradient(55% 75% at 12% 0%, rgba(140,201,206,.34), transparent 70%),
    radial-gradient(45% 60% at 58% 0%, rgba(231,228,225,.85), transparent 70%),
    radial-gradient(40% 55% at 100% 0%, rgba(88,171,179,.16), transparent 72%);
}

/* From the record to the decision: teal light from two corners and signal ripples from the top right */
.info{position:relative;isolation:isolate;overflow:clip}
.info::before,.info::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.info::before{
  inset:0;
  background:
    radial-gradient(48% 42% at 8% 0%, rgba(88,171,179,.22), transparent 72%),
    radial-gradient(42% 40% at 96% 100%, rgba(29,108,116,.28), transparent 72%);
}
.info::after{
  width:1200px;aspect-ratio:1;right:-420px;top:-460px;border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(140,201,206,.13) 0 1px, transparent 1px 46px);
  -webkit-mask-image:radial-gradient(closest-side, #000 25%, transparent);
          mask-image:radial-gradient(closest-side, #000 25%, transparent);
}

/* Recognition: a fine diagonal hatch rising from the bottom left */
.rc-section{position:relative;isolation:isolate}
.rc-section::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;left:0;bottom:0;width:72%;height:62%;
  background:repeating-linear-gradient(135deg, rgba(19,69,92,.08) 0 1px, transparent 1px 13px);
  -webkit-mask-image:radial-gradient(70% 85% at 0% 100%, #000, transparent 75%);
          mask-image:radial-gradient(70% 85% at 0% 100%, #000, transparent 75%);
}

/* A few good questions: a warm stone band between the mint Beacon section and the contact panel,
   teal light behind the answers, fading to paper so it runs straight into contact. A fine dot grid
   fills the quiet corner under the heading (contact keeps the ripples, so the corner differs). */
.sx-questions{position:relative;isolation:isolate;overflow:clip;border-top:1px solid rgba(13,36,51,.08);
  background:
    radial-gradient(48% 60% at 100% 0%, rgba(140,201,206,.30), transparent 70%),
    radial-gradient(40% 50% at 70% 100%, rgba(255,255,255,.7), transparent 72%),
    linear-gradient(180deg, #E9E7E3, #EFEDEA 62%, var(--paper));
}
.sx-questions::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;left:0;bottom:0;width:58%;height:60%;
  background:radial-gradient(circle, rgba(19,69,92,.2) 0 1.1px, transparent 1.6px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(75% 80% at 0% 100%, #000 20%, transparent 72%);
          mask-image:radial-gradient(75% 80% at 0% 100%, #000 20%, transparent 72%);
}

/* Contact: a full-width band of soft teal light with square edges, and ripples in its lower corner */
.contact{position:relative;isolation:isolate;overflow:clip;border-top:0}
.contact::before,.contact::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.contact::before{
  inset:0;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(140,201,206,.5), transparent 62%),
    radial-gradient(50% 70% at 100% 100%, rgba(231,228,225,.95), transparent 70%),
    radial-gradient(38% 50% at 88% 6%, rgba(88,171,179,.2), transparent 72%),
    linear-gradient(160deg, #EEF6F6, #F5F4F2);
  box-shadow:inset 0 1px 0 rgba(13,36,51,.08);
}
.contact::after{
  width:760px;aspect-ratio:1;left:-300px;bottom:-340px;border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(19,69,92,.08) 0 1px, transparent 1px 34px);
  -webkit-mask-image:radial-gradient(closest-side, #000 35%, transparent);
          mask-image:radial-gradient(closest-side, #000 35%, transparent);
}

@media (max-width: 760px){
  .info::after{width:760px;right:-360px;top:-320px}
  .sx-questions::before{width:100%;height:45%}
}