/* Subtle abstract coastal watercolor wash, softly blended into the white page.
   Placement follows the photo frame at desktop and mobile sizes. */
.cc-intro .cc-coast{position:absolute;z-index:0;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,transparent 100%)}
@media(min-width:1151px){
  .cc-intro .cc-coast{
    width:calc(var(--sq) * 2.2894);
    left:calc(100cqw - var(--cc-rail) - var(--off) - var(--sq) * 2.24);
    top:calc(180px - var(--sq) * .348);
  }
}
/* Let the coastal artwork show through without a white section fill or text veil. */
body.gulf-hero-live #coastal-comfort{background:transparent!important}
#coastal-comfort .cc-intro__copy::before{content:none}
/* Tablet and phone: the wash sits softly beneath the photo. */
@media(max-width:1150px){
  .cc-intro .cc-coast{--w:min(150vw,900px);position:relative;width:var(--w);margin:calc(24px - var(--w) * .462) 0 0 calc(var(--cc-rail) - var(--w) * .388 - 10px)}
}
/* the gulls are placed from the bottom of the stage on tablet and phone; lift them by the painting's extra height so
   they keep flying above the photo */
@media(max-width:1150px){
  .cc-intro .cc-gulls{bottom:calc(min(calc(100vw - 2 * var(--cc-rail) - 26px),640px) + 94px + min(150vw,900px) * .17)}
}